I am currently trying to get an image with an SVG clipping path to scale with the browser (image needs to be 100% of browser width). I have read in several places that applying both clipPathUnits="objectBoundingBox" and transform="scale(0.01)" is the solution, however I am unable to get this to work. Whenever I apply those, the image disappears.
No doubt something simple I'm missing?
HTML
<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url("#clipPolygon");" class="moving">
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox" transform="scale(0.01)">
<polygon id="poly1" points="317 343,966 254,964 -6,610 -5">
<animate id="poly1Anim" attributeName="points" dur="500ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>
If you remove the two attributes mentioned above, the image shows, however I require the image and path to scale with the browser.
Turns out the solution was the simple case of adjusting the scale from 0.01 to 0.001!
<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url("#clipPolygon");" class="moving">
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox" transform="scale(0.001)">
<polygon id="poly1" points="317 543,966 254,964 -6,610 -5">
<animate id="poly1Anim" attributeName="points" dur="500ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>