Question

我认为SVG路径中存在的最后一个元素将位于顶部。以下是我正在处理的两个案例：

第一个是：http://jsfiddle.net/rakn0j4b/
第二个是：http://jsfiddle.net/gttgu8d8/

现在，当我“将它们”合并在一起时，这就是我所获得的：http://jsfiddle.net/x006fb9r/

如您所见，最后一个元素落后于第一个元素。我也尝试了相反的方法，也就是先把第二个元素，但没有任何改变。

有趣的是，如果我“重复”第二个元素（所以我的路径是1st element 2nd element 2nd element），那么问题就会得到纠正。对于发生了什么的暗示？

Answer 1

如果要将这两个部分组合在一起，最简单的解决方案是将它们添加为单独的<path>元素。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M110.0,30.0 v 1.0 h 600.0 v -1.0M110.0,40.0 v 1.0 h 600.0 v -1.0M110.0,50.0 v 1.0 h 600.0 v -1.0M110.0,60.0 v 1.0 h 600.0 v -1.0M110.0,70.0 v 1.0 h 600.0 v -1.0 M710.0,30.0 v 41.0 h 1.0 v -41.0 "></path>

    <path d="M110.0,30.0 l 6.0,0 0,41.0 -6.0,0 z m9.0,0.0 l 1.1999999,0 0,41.0 -1.1999999,0 z m5.0,14.5a2.5,2.5 0 1,0 5.0,0 a 2.5,2.5 0 1,0 -5.0,0 z m0.0,11.5a2.5,2.5 0 1,0 5.0,0 a 2.5,2.5 0 1,0 -5.0,0 z"></path>
</svg>

＆＃13;

我认为SVG路径中存在的最后一个元素将位于顶部。

它们是，但你没有创建两个元素，你创建了一个包含许多子路径的单个路径元素。

如果路径中的子路径重叠，则可以填充或不填充拦截区域，这取决于这些区域是否被视为＆＃34;内部＆＃34;路径与否。有几种不同的算法可用于确定内部问题。您可以使用fill-rule属性控制使用哪种算法。但是，默认填充规则（nonzero）通常会绘制大多数重叠区域，但是可能永远不会绘制某些拦截区域，因为它们被视为＆＃34; oustide＆＃34;通过两种算法。您的组合路径似乎就是这种情况。

如果要确保绘制重叠区域，请使用单独的<path>元素。正如我上面所做的那样。

SVG路径：最后一个元素落后了？

1 个答案: