[–] randallu 13y ago ↗ or mask-image with the image being a url to some SVG... I think in this example the image is an SVGImage as well. mask-image would work on arbitrary HTML content (such as video, etc).This example clips video to a path in a PNG, but it ought to work with the URL pointing to an SVG image: http://www.apple.com/html5/showcase/video/ [–] jachwe 13y ago ↗ i like the approach.also (in webkit) you can use an svg data url in your css mask-image to eliminate the extra request. works like a charme for all elements. [–] darklajid 13y ago ↗ "You’ll need to download Safari to view this demo.To view this demo, you’ll need Safari 5 on Mac OS X or Windows, Safari on iOS, or the latest WebKit Nightly Build."Is there really something special going on or is this as braindead as I assume it is, given that I'm using a modern browser? Really webkit only?
[–] jachwe 13y ago ↗ i like the approach.also (in webkit) you can use an svg data url in your css mask-image to eliminate the extra request. works like a charme for all elements.
[–] darklajid 13y ago ↗ "You’ll need to download Safari to view this demo.To view this demo, you’ll need Safari 5 on Mac OS X or Windows, Safari on iOS, or the latest WebKit Nightly Build."Is there really something special going on or is this as braindead as I assume it is, given that I'm using a modern browser? Really webkit only?
[–] lbotos 13y ago ↗ Does anyone know the browser support for this? Does it degrade gracefully? [–] sic1 13y ago ↗ Yea, browser support is a must have on articles like this. It was my first question upon opening the article. Some of us have rules to follow... [–] sic1 13y ago ↗ I couldnt take it, had to look.Desktop: Chrome, FF, IE 9+, Opera, SafariMobile: Android 3.0, FF Mobile 1.0, Opera Mobile, Safari Mobile 3.0.4+Notable issues: No support for IE 7 or 8 (is there a polyfill?), No Android gingerbread support (a lot of people still have 2.3)https://developer.mozilla.org/en-US/docs/SVG/Element/clipPat... [–] [deleted] 13y ago ↗ (comment deleted)
[–] sic1 13y ago ↗ Yea, browser support is a must have on articles like this. It was my first question upon opening the article. Some of us have rules to follow... [–] sic1 13y ago ↗ I couldnt take it, had to look.Desktop: Chrome, FF, IE 9+, Opera, SafariMobile: Android 3.0, FF Mobile 1.0, Opera Mobile, Safari Mobile 3.0.4+Notable issues: No support for IE 7 or 8 (is there a polyfill?), No Android gingerbread support (a lot of people still have 2.3)https://developer.mozilla.org/en-US/docs/SVG/Element/clipPat...
[–] sic1 13y ago ↗ I couldnt take it, had to look.Desktop: Chrome, FF, IE 9+, Opera, SafariMobile: Android 3.0, FF Mobile 1.0, Opera Mobile, Safari Mobile 3.0.4+Notable issues: No support for IE 7 or 8 (is there a polyfill?), No Android gingerbread support (a lot of people still have 2.3)https://developer.mozilla.org/en-US/docs/SVG/Element/clipPat...
8 comments
[ 2.8 ms ] story [ 30.5 ms ] threadThis example clips video to a path in a PNG, but it ought to work with the URL pointing to an SVG image: http://www.apple.com/html5/showcase/video/
also (in webkit) you can use an svg data url in your css mask-image to eliminate the extra request. works like a charme for all elements.
To view this demo, you’ll need Safari 5 on Mac OS X or Windows, Safari on iOS, or the latest WebKit Nightly Build."
Is there really something special going on or is this as braindead as I assume it is, given that I'm using a modern browser? Really webkit only?
Desktop: Chrome, FF, IE 9+, Opera, Safari
Mobile: Android 3.0, FF Mobile 1.0, Opera Mobile, Safari Mobile 3.0.4+
Notable issues: No support for IE 7 or 8 (is there a polyfill?), No Android gingerbread support (a lot of people still have 2.3)
https://developer.mozilla.org/en-US/docs/SVG/Element/clipPat...