web-dev-qa-db-ja.com

ある形状を別の形状にカットするにはどうすればよいですか？

SVGである形状を別の形状から切り取る方法はありますか？たとえば、長方形と楕円があり、中央に透明な穴がある長方形を作成したいとします。私はそれがこのように見えるだろうと想像します：

<set operation="difference" fill="black">
    <rect x="10" y="10" width="50" height="50/>
    <ellipse cx="35" cy="35" rx=10 ry=10/>
</set>

私が見つけることができる最も近いものはクリッピングであり、それは私に2つの形の交差点を与えるでしょう。私の例では、穴だけが中実になり、残りの長方形が透明になります。

Inkscapeを調べたところ、パスメニューに違いのオプションがありますが、これにより形状がパスに変換され、新しいパスが作成されます。形状のアイデンティティが失われるため、たとえばsvgファイルに移動して楕円の半径を変更する簡単な方法はありません。

これをどのように行うかについてのアイデアはありますか？

svg
36
user4891

長方形の塗りつぶしが円のある場所にペイントされないようにする場合は、 fill-rule: evenodd プロパティを使用してこの効果を実現できるはずです。 SVG仕様のこの例 を参照してください（以下の画像は、ブラウザーがSVGをサポートしている場合にのみ表示されます）：

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

何らかの理由で、質問で指定したrectやellipseのような形状でこれを機能させることができないようです。 これが私の試みです ：

A blue square with a circle inside

26
Brian Campbell

パス要素を使用して穴を開ける必要があります。

SVG仕様の例 を参照してください:(このリンクまたは次の画像をクリックして、実際のsvgファイルを表示できます）

svg hole example

<g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3">
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/>

    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
             M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/>

    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/>
</g>

あなたの場合：

<path d="M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z"
    stroke="blue" stroke-width="2" fill="red" fill-rule="evenodd" />

M10 10h50v50h-50z長方形を描画します。

M25 35a10 10 0 1 1 0 0.0001 z楕円を描画します。

fill-rule="evenodd"穴を開けます。

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

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

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

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

This image explain how to cut a hole

W3cのドキュメントを参照してください： SVG Arcコマンド および SVG fill-ruleプロパティ 。

41
cuixiping

<path>を使用する場合は、fill-ruleを使用する必要があります。ただし、<path>のサブパスである円の半径を変更することは確かに可能です。必要なのは、 arc pathコマンド をマスターすることだけです。

2
Erik Dahlström