html - SVG clippath viewbox not working -



html - SVG clippath viewbox not working -

i attempting add together svg clippath div element.

i want clippath span total div element.

i gave svg viewbox , gave clippath polygons points within viewbox.

however, polygons not seem adjust height , width's based on viewbox or container's height , width. remains static.

how work? here svg code:

<?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="100" height="100" viewbox="0 0 100 100" > <clippath id="svgclip"> <polygon points="0 0 0 100 100 100"/> </clippath> <path id="svgmask"> <polygon points="0 0 0 100 100 100"/> </path> </svg>

this html code:

<div class="div11"></div>

and css:

.div11{ background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; width: 100%; position:absolute; top:0px; left:0px; z-index: 5000; -webkit-clip-path: url(clip.svg); clip-path: url(clip.svg#svgclip); -webkit-mask: url(clip.svg);}

please help! here's fiddle: http://jsfiddle.net/xhh7a/3/

thanks!

i think you're looking for. it's sized shape, @ to the lowest degree when ran in firefox.

<?xml version="1.0" encoding="utf-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg"> <clippath id="svgclip" clippathunits="objectboundingbox"> <polygon points="0 0 0 1 1 1"/> </clippath> <path id="svgmask" maskcontentunits="objectboundingbox"> <polygon points="0 0 0 1 1 1"/> </path> </svg> <div class="div11"></div>

html css svg

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -