svgclippaths, needs augmented documentation

[nsfmc]

I just tried, with this handy test page to get a svg clipping path on html content, to no avail (although firefox does support this).

Instead, what safari does support is the svg clipPath command, which you can see (weirdly) here.

i think maybe the documentation should be slightly changed to reflect that svgclippaths refers primarily to svg proper (or doesn't link to the mdc page on using svg clip paths to clip html content (which, admittedly, is a nifty feature))

maybe an admonition or some note on the documentation of what svgclippaths refers to basically, because it's a bit unclear at the moment.

[nsfmc]

i don't know how i came across this, but svg clipping is supported in safari (albeit obtusely) via the -webkit-mask property, and the code ends up looking like this:

div{
  clip-path:url(./rhombus.svg#rhombusclip);
  -webkit-mask:url(./rhombus.svg#rhombus);
  -webkit-mask-repeat:no-repeat;
}

so basically svgclippaths is not 'technically' a false positive, but the documentation for modernizr should maybe link to something like this so that others can figure out how to implement it in both ff/safari.

[nsfmc]

The demo here shows this currently working across ff/safari correctly, although it requires that your svg look something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="546px" height="600px">
  <clipPath id="rhombusclip">
    <path id="rhombuspath" d="M0,0 L200,0 546,600 346,600 z" fill="#000000" />
  </clipPath>
  <path id="rhombus" d="M0,0 L200,0 546,600 346,600 z" fill="#000000" />
</svg>

so it's less than ideal because you have to recreate your clip path, but it works.

also, i'm totally aware that this may seem to be a non-issue (nobody seems interested), but i'm really writing this up for 'past me' who wanted to find a way to do this and for anyone else who's trying to address this similar problem. good luck!

[nsfmc]

additionally, resource for implementing in safari:

• the webkit blog
• apple safari css reference

[paulirish]

thx for all the detail on this one, nsfmc..

we'll incorporate this research into the docs.

[paulirish]

added it to the site docs and inline docs

this demo is awesome btw. i think i might blog it.

[nsfmc]

awesome, glad it was useful.

rock on,

On Sat, Dec 10, 2011 at 2:23 PM, Paul Irish <
reply@reply.github.com

wrote:

added it to the site docs and inline docs

this demo is awesome btw. i think i might blog it.

---

Reply to this email directly or view it on GitHub:
#213 (comment)

[matt-d-rat]

I realize that this issue was closed a year ago. But I believe IE9 is giving a false positive for this test when using clip-paths from an external stylesheet in this way.

I am working on a project which uses code that implements the technique described above but the clip-paths (even with an -ms- prefix) do not get applied to the HTML element in IE9. Yet if you were to run a test for Modernizr.svgclippaths, IE9 will pass. This needs re-investigation.

According to IE9 docs: http://msdn.microsoft.com/en-gb/ie/hh410107.aspx IE9 supports clip-paths, but this is slightly misleading as from what I can derive from my own testing is that they don't support clipping of HTML elements with SVG.

I'm using Modernizr 2.6.2 at the time of testing.

[paulirish]

svgclippaths is a test only for clippaths in svg.
it was named that way to distinguish from clipping html, i believe.

and i forget, but i think its possible that svg clipping html elements
doesnt have a detect yet.

On Wed, Feb 20, 2013 at 5:56 PM, Matt Fairbrass notifications@github.comwrote:

I realize that this issue was closed a year ago. But I believe IE9 is
giving a false positive for this test when using clip-paths from an
external stylesheet in this way.

I am working on a project which uses code that implements the technique
described above but the clip-paths (even with an -ms- prefix) do not get
applied to the HTML element in IE9. Yet if you were to run a test for
Modernizr.svgclippaths, IE9 will pass. This needs re-investigation.

According to IE9 docs: http://msdn.microsoft.com/en-gb/ie/hh410107.aspxIE9 supports clip-paths, but this is slightly misleading as from what I can
derive from my own testing is that they don't support clipping of HTML
elements with SVG.

I'm using Modernizr 2.6.2 at the time of testing.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/213#issuecomment-13846262.

[matt-d-rat]

Oh ok, well yeah that makes sense now that I think about the way it is named. Would love to see a test for svg clipping of elements. +1 for this feature.

[paulirish]

if you can, spend some time to try to figure out how to test it.. maybe
using getElementFromPoint() ?

On Thu, Feb 21, 2013 at 9:30 AM, Matt Fairbrass notifications@github.comwrote:

Oh ok, well yeah that makes sense now that I think about the way it is
named. Would love to see a test for svg clipping of elements. +1 for this
feature.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/213#issuecomment-13880156.

[curiouspers]

div{
clip-path:url(./rhombus.svg#rhombusclip);
-webkit-mask:url(./rhombus.svg#rhombus);
-webkit-mask-repeat:no-repeat;
}

+1 for proper detection of this feature, i am using this method on our site: http://pixeljuice.ru/en but don't know how to detect is this feature available or not..

[Daniil-333]

@nsfmc , You are well done! God bless you)
There is very little information on the Internet on this subject.