Clipping images in HTML with clipPath

by bitsweet • 14 years ago

26 7 14 years ago

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

randallu• 14 years 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• 14 years 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• 14 years 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• 14 years ago

Does anyone know the browser support for this? Does it degrade gracefully?

sic12• 14 years 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...

sic12• 14 years ago

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...

Clipping images in HTML with clipPath

Related Stories