SVG符号ViewBox用stroke=1裁剪圆绘制

Question

我正在创建许多元素，它们基本上是基于模板，但具有不同的大小和颜色--圆圈、方框、星号、钻石、大量使用于图表中的元素。我发现可以使用SVG符号来定义模板，如下面的示例所示：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的笔画宽度是如何绘制的吗？

使用SVG矢量效应应该可以实现这些结果，方法是将veStrokePath与veIntersect (用于“内部”)或veExclude (用于“外部”)相结合。然而，向量效果仍然是一个工作的草稿模块，我还没有找到它的实现。