4 ms·
Clipping images in HTML with clipPath
- TazeTSchnitzel 14y agoOr you can use media fragments, I think...
- randallu 14y agoor 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/ http://www.apple.com/html5/showcase/video/
- jachwe 14y agoi 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 14y 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 14y agoDoes anyone know the browser support for this? Does it degrade gracefully?
- sic1 14y agoYea, 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 14y agoI couldnt take it, had to look. 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/clipPath https://developer.mozilla.org/en-US/docs/SVG/Element/clipPat...
- deleted 14y ago[deleted]