: SVG prevent stroke from eating near chars I'm trying to build web text editor based on SVG, i want the outline/stroke to be always behind the text, currently SVGs looks like this <svg width="209.00049363057323"
I'm trying to build web text editor based on SVG, i want the outline/stroke to be always behind the text, currently SVGs looks like this
<svg width="209.00049363057323" height="62.000025477707005" viewBox="0 0 164.84375 54.34375" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.6622862991524896"><text fill="#FFFFFF" stroke="#1a2234" stroke-width="15.3428571428571425" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" style="paint-order: stroke;" data-textcurve="-74" data-itemzoom="1 1" data-textspacing="0" itemzoom="0.7887260765550239 0.8765120967741935" data-stroke="rgba(0, 0, 0, 0)" fill-rule="evenodd"><textPath xlink:href="#textPath-item-2"><tspan dy="0">Vestaburg High </tspan></textPath></text></g><defs><path id="textPath-item-2" d="M 5.46875 20.359375 A 128.52837025907655 128.52837025907655 0 0 0 160.16935824632242 20.359374999999986"></path></defs></svg>
jsfiddle.net/z3pa9a8q/
How can i fix that, so white text always stays on foreground?
More posts by @Ogunnowo857
1 Comments
Sorted by latest first Latest Oldest Best
From the perspective of someone who uses Adobe Illustrator, there's two possible way to achieve this.
1. Converting the text to outlines: While working with text you can't change the direction of the stroke unless you convert the text to outlines.
Select the text, go to Type > Create Outlines. Once the text has being converted, open the Stroke menu and click in this icon (the one rounded with yellow):
This way the stroke will stay away from the graphic (This option is not available when the graphic is a text element).
2. Pasting the same text in front. Just copy your text (ctrl + c) and paste it in front (ctrl + f), put the stroke to 0 and the fill color in white in the text you pasted in front. Save as an SVG.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.