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
Post a Comment