2

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>

https://jsfiddle.net/z3pa9a8q/

How can I fix that, so white text always stays on foreground?

1

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):

enter image description here

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.

  • I'd go a step further and make the back text the same color as the stroke. This way you'll avoid any rendering artifacts or misalignment. – Luciano May 11 '18 at 9:51
1

You can clone the text 2 times one time with stroke and one without.

<defs>
  <text id ="a"
    fill="#FFFFFF" stroke-width="15.3428571428571425" stroke-linecap="round" stroke-linejoin="round" text-anchor="start" font-size="24px" data-textcurve="-74" data-itemzoom="1 1" data-textspacing="0" itemzoom="0.7887260765550239 0.8765120967741935">
    <textPath xlink:href="#textPath-item-2"><tspan dy="0">Vestaburg High </tspan></textPath></text>
    <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>
  <use xlink:href="#a" stroke="#1a2234"/>
  <use xlink:href="#a"/>
  </svg>

Link to live codepen

enter image description here

Image 1: results in

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.