Подтвердить что ты не робот

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

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

Но это не сработает. Он показывает область "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"/>

EDIT:

Моя проблема в том, что AFAIK <mask> не работает в iOS WebKit.

4b9b3361

ОТВЕТЫ

Ответ 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, который использует правило клипа, выглядит следующим образом:

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