web-dev-qa-db-ja.com

SVG長方形に穴を開ける方法

したがって、基本的に私のタイトルが言うように、rect要素に「穴を開ける」必要があります。

私は2つのrect要素を重ねて配置しています。下部の色は白で、上部の色は灰色で表示されます。

私がやりたいことは、上のrect要素から三角形を切り取って、下のrect要素が透けて見えるようにすることです。

このsvg要素は、ページ上のメディアプレーヤーのオーディオボタンとして使用されます。言い換えれば、マウスを左/右にクリック（またはドラッグ）でき、オーディオレベルの変化は、下部の四角形要素の幅の変化によって表されます。上のrect要素の。

混乱しないようにお願いします。 ：P

これがどのように見えるかの簡単なモックアップです： http://forboden.com/coding/s1.png

これが私のコードです： http://forboden.com/coding/svgClipTest.html

ここでどこがいけないのですか？

svg
27
Yansky

最も簡単な方法は、ホールで<path>を使用し、ポインターイベントをnoneに設定して、イベントが<rect>の下を通過できるようにすることです。もちろん、それらを<g>でラップしてイベントを処理するなど、イベントを処理する他の多くの方法があります。

基本的な形状に制限したり、複雑なクリッピングを使用したりする必要はありません。 inkscapeのようなツールで生成されたパスデータをコピーして貼り付けることができるように、物事を十分に柔軟にしてください。

2
artificialidiot

fill-rule: evenodd （default）プロパティを使用して、この効果を実現します。長方形の塗りつぶしが円のある場所でペイントされないようにする場合。 SVG仕様のこの例 を参照してください。

A pentagram and two circles, filled in red, with the centers cut showing the white background

重要な点は、外側の形状と内側の形状（穴）を異なる方向（時計回りと反時計回り）で描くことです。

  • 外側の形状を時計回りに描き、内側の（穴）形状を反時計回りに描きます。
  • または逆に、外側の形状（穴）を反時計回りに描き、内側の形状を時計回りに描きます。
  • 外形と内形（穴）の経路データを連結します。

より多くの穴パスデータを連結することで、より多くの穴をカットできます。

この画像は、穴を開ける方法を説明しています：

enter image description here

61
cuixiping

あなたはすでにそれを解決しているようですが、それを追加したいのは、より高度なものが必要な場合は<mask>、たとえば http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg を参照してください。

ただし、マスキングやクリッピングを回避できる場合（たとえば、上に物を描くだけで）、通常はパフォーマンス/ユーザーエクスペリエンスが向上します。

9
Erik Dahlström