Adding the stroke-linecap attribute to a data URI

[Michelle_S]

Hi people,

I have two data URIs that come with one of the free website templates. Both of them make up the mobile menu slider icon. My goal is to try to get the mobile menu slider icon to have round ends using the stroke-linecap: round attribute.

How do I achieve that? I have tried putting in between the stroke attributes and using ‘round’ with apostrophes. Also tried with %3B and nothing seems to populate.

Here is the code for your reference (both are same, just different colors):

#header nav ul li a[href="#menu"]:before {
							background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23172868%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
							opacity: 0;
						}

My website: michelleshean.com

Thanks!

[bbsmooth]

I’m not an svg expert so I can’t answer your question with the method you want but I can tell you that I was able to do what you want with some fairly simple CSS. Not saying this is a better solution. Just another option if you don’t get an svg answer here.

[KittyMac]

I think the reason your changes weren’t having an effect is that the line elements currently stretch the full width of the SVG viewport (width 100 per the viewBox attribute).

Rounding the ends adds a radius, so it needs a little extra space at each end i.e. on the horizontal x-axis.

I’ve created a codepen - it’s just your data URI represented as regular html .

You can see that I’ve added the stroke-linecap property and also changed the x1 and x2 values to move the left/right ends of the lines slightly inwards.
You can use that to experiment with the x1/x2 values.

You can add the stroke-linecap property to the styles in your data URI as:
stroke-linecap: round%3B

[Michelle_S]

Your explanation of the SVG viewport and the x values make sense, and I got it to work. Thanks again!