Clipping images in HTML with clipPath(coderwall.com)

26 ポイント投稿者 bitsweet14 年前7 コメント

http://coderwall.com/p/blx8kw

3 コメント

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/

darklajid14 年前

"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?

jachwe14 年前

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.

lbotos14 年前

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

[deleted]14 年前

sic114 年前

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

sic114 年前

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

TazeTSchnitzel14 年前

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