13

私はそれをfill形作ることができ、その色で穴を埋めないように穴のある形を描きたいと思います（それらを透明のままにします）。

W3パス仕様によると：

複合パス (つまり、複数のサブパスを持つパス) を使用すると、オブジェクトに「ドーナツ ホール」などの効果を与えることができます。

Raphaelのベクターパスでこれを実行する方法の非常に簡単な例を教えてください。

どうもありがとう。

4

4 に答える 4

19

あなたがトリックを知っていれば、これは非常に簡単であることがわかります。たとえば、これは機能しません：

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
          " M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");

しかし、これは機能します*：

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");

違いは、ドーナツが表示されるためには、内側のパスの頂点が外側のパスと逆の順序で描画される必要があることです（つまり、一方を時計回りに、もう一方を反時計回りに描画します）。text.xml.svg.develアーカイブで見つけたちょっとした情報。

（*）少なくとも、Chrome、Opera、Firefox 4.0ベータ版では動作しますが、3.6では動作しません

于 2010-07-29T18:04:56.813 に答える
4

Firefox 3.6 でこれを機能させるには、穴を塞ぐ必要があります。つまり、内側の境界を定義するときに、座標を自分自身に結合させます。不思議なことに、これは外側の境界には必要ないようです。

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 L 75 75 z")
.attr("fill", "#f00");

コメントをフォローアップするための簡単なメモ - 時計回り/反時計回りの概念は最初は奇妙に思えるかもしれませんが、GIS / CAD テクノロジ全体でかなり標準的です。

于 2010-12-07T23:16:26.593 に答える
3

これを行う正しい方法は、属性「fill-rule」を値「evenodd」に設定することだと思います。svg仕様を見てください：

「Raphael.Element.attr()」で設定しようとしないでください。うまくいきません。代わりに jQuery.attr() 関数を使用します。

// assuming paper is a Raphael.Paper object
path = paper.path('Mx,y{some path commands for the main shape}Z'
                  +'Mx,y{some path commands for the hole}Z'
);

// this doesn't work
path.attr({'fill-rule': 'evenodd'});
// neither this
path.attr({fillRule: 'evenodd'});

// if you inspect the object returned by paper.path
// you can see it has a reference to the DOM element
console.debug(path)

// so a bit of jQuery and it's done
$(path[0]).attr('fill-rule', 'evenodd');

私はこれを複雑なパスで使用して成功しました。

于 2012-08-30T11:08:14.743 に答える