

Clipping images in HTML with clipPath - bitsweet
http://coderwall.com/p/blx8kw

======
randallu
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/>

~~~
darklajid
"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
Does anyone know the browser support for this? Does it degrade gracefully?

~~~
sic1
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
I 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/clipPat...](https://developer.mozilla.org/en-
US/docs/SVG/Element/clipPath)

------
TazeTSchnitzel
Or you can use media fragments, I think...

