SVG Symbol ViewBox cuts circle rendering with stroke=1

Question

I am creating a lot of elements which are basically based on template but with different size and color - circles, boxes, asterisks, diamonds, elements that are used a lot into a chart. I found that I could use SVG Symbol to define my template like in the following example: http://jsfiddle.net/9x2mbs3n/

    <svg>
<!-- symbol definition  NEVER draw -->
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<!-- actual drawing by "use" element -->
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>

But maybe because I am using non-scaling stroke it cuts the circle on left and bottom: http://jsfiddle.net/408343fr/1/

<symbol viewBox="0 0 10 10" id="symbolcircle1"><circle stroke="param(stroke)" fill="none" stroke-width="1" vector-effect="non-scaling-stroke" cx="5" cy="5" r="5"></circle></symbol>

    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbolcircle1" stroke="rgb(0,0,0)" x="10" y="10" width="100" height="100"></use>

I want to be able to define a circle template and to draw it with different radius but because of the viewbox it's not that simple.

enter image description here

Cheers!

Maybe I could use reusable defs but then I have to calculate the transformation for the group... but still I hope I could use symbols — abuseukk, Apr 24 '15 at 15:02

score 2 · Accepted Answer · edited May 23 '17 at 11:51

By default the stroke location of an SVG is in the center. (Thus in your case it's something like half a pixel is outside of the element, half of it is inside. That's probably why you have that wired looking effect.) Even though there unfortunately is no option to change that, there are ways to bypass that, like explained here: Can you control how an SVG's stroke-width is drawn?

It should be possible to achieve these results using SVG Vector Effects, by combining veStrokePath with veIntersect (for 'inside') or with veExclude (for 'outside). However, Vector Effects are still a working draft module with no implementations that I can yet find.

You can also set `overflow:visible` on the symbol element (and possibly also on the svg root). Like this http://jsfiddle.net/408343fr/2/. — Erik Dahlström, Apr 29 '15 at 14:05

SVG Symbol ViewBox cuts circle rendering with stroke=1

1 Answers1