SVG Symbol ViewBox剪切笔触= 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的笔触位置在中心。 （因此，在您的情况下，元素外部有一半像素，内部有一半像素。这可能就是您具有有线效果的原因。）尽管不幸的是，没有选择来更改它，但仍有一些方法可以绕过就像这里解释的那样： 您可以控制SVG的笔划宽度的绘制方式吗？

通过将veStrokePath与veIntersect （对于“内部”）或与veExclude （对于“外部”）组合使用，应该可以使用SVG矢量效果获得这些结果。 但是，Vector Effects仍然是一个工作草案模块，尚无我能找到的实现。