New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svgclippaths, needs augmented documentation #213

Closed
nsfmc opened this Issue Mar 6, 2011 · 11 comments

Comments

Projects
None yet
4 participants
@nsfmc

nsfmc commented Mar 6, 2011

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

This comment has been minimized.

Show comment
Hide comment
@nsfmc

nsfmc May 12, 2011

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 commented May 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@nsfmc

nsfmc May 12, 2011

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 commented May 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@nsfmc

nsfmc May 12, 2011

additionally, resource for implementing in safari:

nsfmc commented May 12, 2011

additionally, resource for implementing in safari:

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish May 22, 2011

Member

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

we'll incorporate this research into the docs.

Member

paulirish commented May 22, 2011

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

we'll incorporate this research into the docs.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 10, 2011

Member

added it to the site docs and inline docs

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

Member

paulirish commented Dec 10, 2011

added it to the site docs and inline docs

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

@paulirish paulirish closed this Dec 10, 2011

@nsfmc

This comment has been minimized.

Show comment
Hide comment
@nsfmc

nsfmc Dec 14, 2011

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)

nsfmc commented Dec 14, 2011

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

This comment has been minimized.

Show comment
Hide comment
@matt-d-rat

matt-d-rat Feb 20, 2013

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.

matt-d-rat commented Feb 20, 2013

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 20, 2013

Member

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/Modernizr/Modernizr/issues/213#issuecomment-13846262.

Member

paulirish commented Feb 20, 2013

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/Modernizr/Modernizr/issues/213#issuecomment-13846262.

@matt-d-rat

This comment has been minimized.

Show comment
Hide comment
@matt-d-rat

matt-d-rat Feb 21, 2013

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.

matt-d-rat commented Feb 21, 2013

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 21, 2013

Member

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/Modernizr/Modernizr/issues/213#issuecomment-13880156.

Member

paulirish commented Feb 21, 2013

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/Modernizr/Modernizr/issues/213#issuecomment-13880156.

@curiouspers

This comment has been minimized.

Show comment
Hide comment
@curiouspers

curiouspers Mar 6, 2013

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

curiouspers commented Mar 6, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment