What is causing the text below the SVG path to appear thicker?

I am encountering an interesting issue with my SVG green marker. The text inside appears bolder than the same text with the same attributes when it is standalone.

https://i.sstatic.net/NYmXX.png

Upon further inspection, I noticed that the text within the green marker looks bolder compared to the other one. I am curious why this happens and how can I make the text less bold within the green balloon to match the standalone version?

<svg width="41" height="51"  xmlns = "http://www.w3.org/2000/svg" >
        <path d="M40 20.3907C40 22.3845 39.3035 24.7755 38.1354 27.3685C36.971 29.9536 35.3565 32.6995 33.5626 35.3918C29.975 40.776
        25.697 45.9056 22.9467 49.0441C21.6333 50.5429 19.3667 50.5429 18.0533 49.0441C15.303 45.9056 11.025 40.776 7.4374 35.3918C5.64351
        32.6995 4.02903 29.9536 2.86459 27.3685C1.69655 24.7755 1 22.3845 1 20.3907C1 9.6841 9.72786 1 20.5 1C31.2721 1 40 9.6841 40 20.3907Z"
        fill = "#73BD07" stroke = "white" />
          <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>
        </svg>
        
        
    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>

htmlcsssvg

Answer №1

To fix the issue, simply remove the stroke setting for the text within the svg element.

<svg width="41" height="51"  xmlns = "http://www.w3.org/2000/svg" >
        <path d="M40 20.3907C40 22.3845 39.3035 24.7755 38.1354 27.3685C36.971 29.9536 35.3565 32.6995 33.5626 35.3918C29.975 40.776
        25.697 45.9056 22.9467 49.0441C21.6333 50.5429 19.3667 50.5429 18.0533 49.0441C15.303 45.9056 11.025 40.776 7.4374 35.3918C5.64351
        32.6995 4.02903 29.9536 2.86459 27.3685C1.69655 24.7755 1 22.3845 1 20.3907C1 9.6841 9.72786 1 20.5 1C31.2721 1 40 9.6841 40 20.3907Z"
        fill = "#73BD07" stroke = "white" />
          <text x="50%" y="20" font-size="12px" dominant-baseline="middle" text-anchor="middle">7234</text>
        </svg>
        
        
    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>
You can also eliminate the stroke attribute by assigning a new class to the <text> tag and then applying styling using stroke: none; like this:

.myStroke {
  stroke: none;
}
<svg width="41" height="51"  xmlns = "http://www.w3.org/2000/svg" >
        <path d="M40 20.3907C40 22.3845 39.3035 24.7755 38.1354 27.3685C36.971 29.9536 35.3565 32.6995 33.5626 35.3918C29.975 40.776
        25.697 45.9056 22.9467 49.0441C21.6333 50.5429 19.3667 50.5429 18.0533 49.0441C15.303 45.9056 11.025 40.776 7.4374 35.3918C5.64351
        32.6995 4.02903 29.9536 2.86459 27.3685C1.69655 24.7755 1 22.3845 1 20.3907C1 9.6841 9.72786 1 20.5 1C31.2721 1 40 9.6841 40 20.3907Z"
        fill = "#73BD07" stroke = "white" />
          <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle" class="myStroke">7234</text>
        </svg>


    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is there excessive whitespace appearing in Internet Explorer 9?

Visit mimictrading.com/index.php When viewed in Firefox, the website displays as intended. However, in IE9, there seems to be a strange space at the top and above the recent topics list. I suspect that it might be related to the 'header' divisio ...

jquerycsslayoutinternet-explorer-9whitespace

Different ways to use jquery to move to the top of an overflow div

$('.lb').click(function() { $('#modal').hide(); var id = $(this).attr('id'); var dir = '/lightbox/' + id + '.php'; $('#lightbox').find('#modal').load(dir, function() { ...

javascriptjqueryhtml

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

How many logical lines of code are in the Ubuntu operating system?

As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...

phpjavascripthtmlcssubuntu

Angular's two-way binding feature does not seem to be updating the value for date

In my Angular - Dotnetcore 2.0 form, users are required to update their demographic information including their birth date. Initially, I was using the following code snippet to display the birthdate: <input id="dateOfBirth" type="date" class="form-cont ...

htmlangular.net-core

Modify the bootstrap dropdown background to display only an image

I am looking to make the image in a dropdown/dropup menu fill the entire background of the dropdown. Currently, there is still white space visible around the image. How can I ensure that the dropdown shows only the image and includes a scroll wheel? Addit ...

htmlcssbootstrap-4

What is the best way to adjust the vertical distance between a Material UI FormLabel and Slider element?

I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component: import React from 'react' import PropTypes from 'prop-types' import { MapWithGroundOverlay } from './Map ...

cssreactjsmaterial-ui

Passing a variable from index.html to a script in Angular

I am attempting to pass the array variable 'series' to the script in HTML. Is there a way to do this? app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app ...

javascripthtmljqueryangular

Using PHP Hover should apply CSS styles exclusively to the specified element

I have a piece of PHP code that displays cards. What I need: When a user hovers over the entire element, I want to make the title bolder, move the arrow to the left, and zoom in on the image of that particular hovered element. <div class="posti-class ...

phpjquerycss

Ways to trigger Bootstrap modal through a PHP GET call

I have been searching for a solution to create a modal similar to this one, but I haven't found anything yet. My requirement is that when we pass true in a GET request, the modal should be displayed. Otherwise, if there is no value specified in the $ ...

javascriptphphtmlbootstrap-modal

What could be causing Chrome to reduce the display size in responsive mode?

My website is designed to be responsive and includes a viewport tag for mobile devices, as shown below: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> How ...

htmlgoogle-chrome-devtoolsresponsive

Craft dynamic SVG components using TypeScript

Looking to generate a correctly formatted SVG element using TypeScript: createSVGElement(tag) { return document.createElementNS("http://www.w3.org/2000/svg", tag); } Encountering an issue with tslint: Error message: 'Forbidden http url in str ...

javascriptsvgtypescripttslint

Ensuring radio button validation prior to redirecting to contact form

I created a survey form using HTML and CSS. I am looking to add validation to the questions before redirecting to the Contact form page. Currently, when a user clicks on the submit button in the Survey form, the page redirects to the contact form. Howeve ...

javascriptjqueryhtmlcss

What steps do I need to take in order to resolve the routing issue with angular.js in my

Working on a mobile application with angular.js and firebase.js has been both exciting and challenging. Recently, I encountered an issue where the page refused to load properly because it was trying to access a peculiar URL file://file:///Users/patutinskij ...

angularjshtmlurl-routingangular-routingngroute

Is there a way to retrieve prName and prQty from the double array?

Is there a way to extract the values of prName and prQty from the 2D array? html <h1 v-for="item2 in productListAlaCarte" :key="item2"> <td>{{item2.prName}} {{item2.prQty}}</td> ...

htmlvue.js

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

What is the best way to delete a CSS class from a specific element in a list using React?

I need to implement a functionality in React that removes a specific CSS class from an item when clicking on that item's button, triggering the appearance of a menu. Here is my code snippet. import "./Homepage.css" import React, { useState, ...

javascriptcssreactjs

Why isn't the z-index functioning properly in Vue.js styling?

I am currently developing a simple component that displays four steps, indicating the current step and allowing users to navigate through them. I want to create a design where these numbers are enclosed within circles that are evenly distributed in a line ...

htmlcssvue.jsz-index

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

javascripthtmljsonmootools

Is there a way to change OTF/TTF file formats into EOT?

Is there a simpler way to convert my OTF/TTF fonts to EOT format for Microsoft browsers' @font-face feature? I attempted using the WEFT tool but without success. Any alternative methods available? ...

cssbrowserfontstype-conversionfont-face