evenodd填充一组形状

Question

如何在＃g3：

上填写偶数

<defs>
      <ellipse id="g1" cx="100" cy="100" rx="75" ry="40" fill="none" />
</defs>

<g id="g3" stroke="black" stroke-width="2">
  <g id="g2">
    <use xlink:href="#g1" />
    <use xlink:href="#g1" transform="rotate(30 100 100)"/>
  </g>
  <use xlink:href="#g2" transform="rotate(60 100 100)"/>
  <use xlink:href="#g2" transform="rotate(120 100 100)"/>
</g>

所以，它只是一系列旋转的椭圆，但我希望交叉区域偶数填充：

只需在＃g3中添加fill-rule =“evenodd”就行了。对不起，如果这太基础了。我意识到在.js中可能有一种方法可以做到这一点，但想知道是否可以用直接svg完成。

---

例如，有没有一种方法可以将#g3本身定义为某种意义上的新路径，这样就可以将evenodd应用于整体。

Answer 1

我想基本上只是在.js循环中的一个路径中绘制一系列弧 - 这样它的所有路径和偶数填充类型应该可以工作，我想。没关系。