css - How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers -


i have defined svg clippath , applying few divs on page. works/displays expected in ff, in chrome , safari (all latest versions), seems clippath affect html element if html element positioned in top-left corner of page.

svg object

<svg height="0" width="0">     <defs>         <clippath id="clip">             <path fill="#000000" d="m0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003         c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79         c23.312,3.672,26.527,1.098,30,0.01h0z"/>         </clippath>     </defs> </svg> 

css element clipped

.clipme {     background: red;     width: 30px;     height: 21px;     clip-path: url(#clip);     -webkit-clip-path: url(#clip); } 

jsfiddle

i believe this article begins address use of coordinate systems, got lost/confused several times. sounds it's saying using different units of measurements , coordinates, it's possible apply clippath html element... i'm not sure.

i exported clippath illustrator if there different units/coordinates need used, i'm not sure how i'd go doing it.

in chrome and/or safari, has applied svg clippath (that actual path - not polygon or ellipse) html element located somewhere other top left of page?

i think paulob's responses on @ sitepoint wraps issue pretty nicely. long story short: support applying svg clippath html element not quite there webkit browsers yet.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -