SVG符号ViewBox使用stroke = 1剪切圆形渲染

Question

我正在创建许多基本上基于模板但具有不同大小和颜色的元素 - 圆形，方框，星号，钻石，在图表中大量使用的元素。我发现我可以使用SVG Symbol来定义我的模板，如下例所示： 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>

但也许是因为我使用的是非缩放笔划，它会切割左边和底部的圆圈： 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>

我希望能够定义一个圆形模板并以不同的半径绘制它，但由于视图框的原因并不那么简单。

干杯！

Answer 1

默认情况下，SVG的笔划位置位于中心。 （因此，在你的情况下，像半个像素的东西在元素之外，其中一半在里面。这可能就是你有这种有线效果的原因。） 即使遗憾的是没有选择改变它，但仍有办法绕过这一点，如下所述：Can you control how an SVG's stroke-width is drawn?

  

应该可以使用SVG Vector Effects将veStrokePath与veIntersect（对于＆＃39;内部＆＃39;）或veExclude结合使用来实现这些结果（为了＆＃39;外面）。但是，Vector Effects仍然是一个工作草案模块，没有我能找到的实现。