如何在另一個內部切割一個形狀？

Question

有沒有辦法在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> 

我能找到的最接近的東西是裁剪，它會給我兩個形狀的交集。在我的例子中，這將導致只有洞是堅實的，矩形的其餘部分是透明的。

我通過Inkscape中望去，有路徑菜單的不同選項，但這形狀轉換爲路徑，然後創建一個新的路徑。形狀的身份會丟失，因此沒有簡單的方法，例如進入svg文件並更改橢圓的半徑。

是否有我怎麼可能做到這一點任何想法？

Answer 1

您應該能夠使用fill-rule: evenodd屬性來達到這個效果，如果你想防止矩形的填充從畫在圓。見this example from the SVG specification（如果你的瀏覽器支持SVG下面的圖片僅顯示）：

出於某種原因，我似乎無法得到這與像rect和ellipse形狀，你所提供的工作題。 Here's my attempt：

Answer 2

遺憾的是，似乎沒有辦法做到這一點。 SVG 1.0和SVG 1.1都不支持布爾形狀操作，其他原因支持裁剪。你可以得到最接近的是試圖獲得一個「倒置」的形狀來做剪輯。

Answer 3

您需要使用<path>，如果你想使用fill-rule。但它肯定可以改變一個循環，是<path>的子路徑的半徑，你只需要掌握arc path command。

Answer 4

您必須使用路徑元素上開一個洞。

見the example from the SVG specification：（您可以點擊此鏈接或以下圖片查看真正的SVG文件）

<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"會造成漏洞。

---

重點是繪製不同方向（順時針與逆時針）的外部形狀和內部形狀（孔）。

• 順時針繪製外部形狀並逆時針繪製內部（孔）形狀。
• 或者相反，逆時針繪製外形（孔）並順時針繪製內部形狀。
• Concat外部形狀和內部形狀（孔）的路徑數據。

您可以通過連接更多的孔路徑數據來切割更多的孔。

此圖片講解如何開一個洞：

見W3C文檔： SVG Arc Commands 和 SVG fill-rule Property。