svg - 偶数填充一组形状

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>

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

只是将 fill-rule = "evenodd" 添加到 #g3 是不行的。对不起，如果这太初级了。我意识到在 .js 中可能有一种方法可以做到这一点，但想知道是否可以使用直接 svg 来完成。

---

例如，有没有一种方法可以将#g3 本身定义为某种意义上的新路径，以便可以将 evenodd 完全应用于它。

Answer 1

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