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.

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

Displaying PHP errors in input fields

I have noticed that this particular code is functioning correctly. However, I am wondering why I receive an error when I remove the foreach loop ($rows as $row). Is there a method to display the data without utilizing it? <?php require("coneccion.php ...

phphtmlcss

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal

IE is notorious for not playing well with CSS

I am facing an issue with my Google search box code. It works perfectly on Firefox, Chrome, and other browsers except for Internet Explorer. Can anyone help me troubleshoot this? Below is the code snippet: Abulkas Tablet #outerContainer{ width: ...

htmlcss

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

javascripthtmlvue.jsdraggablevuejs3

Showing the SQL table data output

Attempting to present a new table based on the SQL query result. Below is the initial table code shown when the user first loads the page. TABLE: <form action="walkthroughs.php" method="POST"> Platform: <input type="text" name="platform" ...

phphtmlmysql

What HTML element identifies the beginning of a particular section?

It has been suggested that Google frowns upon using identical content across multiple websites. Is there a method to mark or label a section of content with its "source"? For example, an attribute might look like this: <div original-content="http://s ...

htmlseogoogle-searchsemantic-markup

Developing a Jquery solution for creating radio buttons layout

Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

javascriptjqueryhtmlmultiple-select

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

Display additional content button, dynamic div identification

I've created a small script that includes a "show more" button at the end of displaying 10 entries. Here is the code: <div id="more<?=$lastid;?>"> <a onclick="showmore(<?=$lastid;?>);">More</a> </div> And here ...

phpjavascriptajaxhtml

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

javascripthtmlthree.jsboids

Remove any javascript code from the ajax modal when it is closed or hidden

I am in the process of creating a music website that showcases songs along with their lyrics. One of the features I have added is a lyrics button that, when clicked while a song is playing, opens up a modal displaying the live lyrics. Everything works per ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Create a table by incorporating the information from the page along with additional content

I need to extract the data from a list and convert it into a table, add some additional content that I will provide, and then align the table accordingly. While I can easily align elements and already have the list, I am facing difficulty in converting it ...

javascriptjqueryhtmlcss

Center the text within the div and have it expand outwards from the middle if there is an abundance of text

I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code: &l ...

javascripthtmljquerycss

Tips on how to display HTML tags in Blade templates

I am struggling to figure out how to include HTML tags in my Blade template in Laravel. It was straightforward in plain PHP, but I am finding it confusing in the context of Laravel. Delete Order by client: {{strtolower($name) . &ap ...

phphtmllaravellaravel-5laravel-blade

Exploring the Potential of JSP in Form Submissions

Here's a OCWCD question that I encountered: <form action="sendOrder.jsp"> <input type="text" name="creditCard"> <input type="text" name="expirationDate"> <input type="submit"/> </form> The question based on the ...

htmljsp

The webpage lacked the functionality of smooth scrolling

I created a website which you can view here. Check out the code below: <div id="mainDiv" class="container"> <div id="header"> <div class="plc"> <h1><a href="#"></a></h1> ...

htmlcss

The website was designed to only allow scrolling on desktop devices, not on mobile devices

I noticed that the website is not scrolling properly on mobile devices, specifically when viewed on a Samsung Galaxy S4 Mini. Does anyone have suggestions on how to resolve this issue? ...

jquerycssmobilescroll

Using the device's width and height with material-ui

Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...

cssreactjsiphonematerial-ui

Is the sequence of CSS styles important in styling web content?

I'm a newcomer to this field and recently encountered an issue with my div styling. My code was compatible with Chrome 11 but did not render properly in Firefox 4, Opera 11.1, and IE 8. Upon review, I found that the style for the div was as follows, a ...

csslayouthtml

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss