1

#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 を全体に適用できるようにする方法はありますか。

4

1 に答える 1

0

基本的には、.js からループ内の 1 つのパスに一連の弧を描くだけだと思います。そのようにして、すべての 1 つのパスと偶数の塗りつぶしタイプが機能するはずです。どうでも。

于 2012-08-08T21:41:33.107 に答える