SVG clipPath для вырезания *внешнего* контента

Обычно элемент <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.


svg masking clipping
person tillda    schedule 27.01.2011    source источник

Ответы (1)


arrow_upward
30
arrow_downward

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

<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>
person Erik Dahlström    schedule 27.01.2011
comment
Спасибо. Я забыл добавить, что не могу заставить <mask> работать с iOS WebKit. Использование <path> работает, но, например, трудно указать эллипс точками. - person tillda; 27.01.2011
comment
Вы можете указать эллипс с помощью команды пути дуги или нескольких команд кривой, см. w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands. - person Erik Dahlström; 27.01.2011