SVG clipPath для вырезания * внешнего * содержимого

Question

Обычно элемент <clipPath> скрывает все, что находится за пределами пути клипа.Чтобы достичь противоположного эффекта - то есть «вырезать» что-то из изображения - я хочу использовать два пути в атрибуте clipPath и clip-rule="evenodd".По сути, я хочу «скорректировать» пути к клипам.

Но это не работает.Он показывает регион «ORed»:

<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.

Answer 1

С маской гораздо проще делать то, что вам нужно, см. этот пример .Вот определение маски:

<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вместо этого это немного сложнее, так как вам нужно использовать элемент пути, чтобы применить правило клипа.ClipPath, который использует там clip-rule, выглядит так:

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