SVG clipPath將* outer *內容剪出

通常，<clipPath>元素隱藏了超出剪輯路徑的所有內容。爲了達到相反的效果 - 即從圖像中「剪出」某些東西 - 我想在clipPath和clip-rule="evenodd"屬性中使用兩條路徑。基本上，我想「異或」剪輯路徑。SVG clipPath將* outer *內容剪出

但它不起作用。它顯示了區域「或運算」：

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox"> 
     <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" /> 
     <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" /> 
    </clipPath>  

<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>

編輯：

我的問題是，AFAIK <mask>不會在iOS版WebKit的工作。

來源

2011-01-27 tillda

使用面罩做後續操作要容易得多，請參閱this example。以下是面罩的定義：

<mask id="maskedtext"> 
    <circle cx="50%" cy="50%" r="50" fill="white"/> 
    <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text> 
</mask>

面罩內白色的區域將被保留，其他所有區域都將被裁剪掉。

這裏使用clipPath代替another example，有點棘手，因爲您需要使用路徑元素來獲取應用剪輯規則。在那裏使用剪輯規則的clipPath看起來像這樣：

<clipPath id="clipPath1"> 
    <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/> 
</clipPath>

來源

2011-01-27 15:31:51

謝謝。我忘了補充說我無法在iOS WebKit上使用'`。例如，使用``可以工作，但很難用點來指定橢圓。 – tillda 2011-01-27 15:45:13

SVG clipPath將* outer *內容剪出

回答

相關問題