Можно ли использовать маски webkit css с SVG без внешнего файла?

Question

Webkit позволяет использовать внешний файл SVG в качестве маски для любого элемента HTML. То есть:

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

В результате:

(Больше информации здесь: http://webkit.org/blog/181/css-masks/)

Кто-нибудь знает, есть ли способ сделать это без внешнего файла SVG? Более конкретно, это можно сделать с помощью SVG, сгенерированного из javascript?

Answer 1

Прошло два года с тех пор, как я задал этот вопрос, и ландшафт браузера сильно изменился. Вот пример именно того, что я хотел сделать, который пока работает только в Firefox: http://mozilla.seanmartell.com/persona/

Как видите, есть div с идентификатором chameleon, который имеет следующий стиль:

<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);">

#clip1 указывает на элемент clipPath внутри встроенного элемента SVG, который ссылается на фигуру.

<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath>

Так что теперь это возможно в Firefox.

Спасибо @ mart3ll за практический пример!

Answer 2

Я не уверен насчет конкретного расширения WebKit, но Mozilla позволяет вам применять эффекты SVG, такие как маски и фильтры, к элементам HTML.Они могут быть определены во внешних файлах или непосредственно в разметке.Смотрите этот пост .На данный момент это не относится ни к одной из спецификаций, но рабочие группы SVG и CSS работают вместе для спецификации этого подхода.См. Страницу Рабочей группы (хотя там явно упоминаются только фильтры, а не маски).

Обычно можно ссылаться на что-то в SVG, включив идентификатор элемента в значение URL (например, url (#someID)).Вы можете попробовать сгенерировать SVG через JS, присвоить ему идентификатор и вставить его в документ и посмотреть, работает ли он.Спецификации нет, так как это расширение WebKit, поэтому трудно сказать, не попробовав его.

Answer 3

Да, я верю, что это возможно. Недавно я использовал PHP для генерации файла SVG. Вот пример, который я сделал:

http://jsfiddle.net/brokeneye/ygsKm/

Также проверьте http://raphaeljs.com/