* outer *の内容をクリップするSVG clipPath

Question

通常、<clipPath>要素はクリップパスの外側にあるすべての要素を隠します。これとは逆の効果、つまり画像から何かを切り取るために、私はclipPathとclip-rule="evenodd"という2つのパスを使いたいと思っています。基本的には、クリップのパスを「xor」したいと思います。

しかし、動作しません。これは、地域 "論理和" を示しています。

<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"/> 

EDIT：

私の問題は、私の知る限り<mask>はiOS版のWebKitでは動作しないということです。

Answer 1

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>