Suppose one has an svg that uses the format for text Some text. I have some stylesheets that apply some style to those elements, one of which ...

svg merge text outline into one complete outline

Suppose one has an svg that uses the format for text <text><tspan>Some text</tspan></text>. I have some stylesheets that apply some style to those elements, one of which applies a font…

I’d like to put an outline around the font, but it does this nonsense (overlaps with other outlines):

I wanted to know if there is some tags / styles I can use to work around this, as opposed to using some software to do it for me.

The solution to the problem can involve the use of javascript, php, xml (or of the like), or like I said styles or tags.

Thank you!

Answer

<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<svg height="500" width="500" xmlns="http://www.w3.org/2000/svg" style="shape-rendering: crispEdges;">
    <style>
        text  { font: 48px 'Dancing Script', cursive; outline: green; paint-order: stroke; stroke: green; stroke-width: 3px;}
        tspan { font: bold 48px sans-serif; fill: red; }
  </style>

  <text x="10" y="250" class="small">
    You are
    <tspan>not</tspan>
    a banana
  </text>
</svg>
</body>
</html>

the paint-order: stroke attribute will hide any overlap.

Advertisement

Answer