SVG剪切路径缩放

Question

我当前正在尝试获得带有SVG剪辑路径的图像，该图像使用浏览器(图像需要是浏览器宽度的100％(。我已经在几个地方读到，同时应用clipPathUnits="objectBoundingBox"和transform="scale(0.01)"是解决方案，但是我无法使它起作用。每当我应用这些时，图像就会消失。

毫无疑问，我缺少一些简单的东西？

codepen

html

<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url(&quot;#clipPolygon&quot;);" 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>

如果您删除了上述两个属性，则图像显示，但是我需要使用浏览器进行缩放的图像和路径。

Answer 1

选择正确的比例：

作为clippathunits =" userpaceOnuse"使用原始路径的大小(以绝对像素为单位(和clippathunits =" objectBoundingbox"使用0到1作为坐标系，正确的刻度为

scale(1/x, 1/y)

因此，对于具有1280x800 PX图像的坐标的SVG，正确的刻度将是：

scale(0.00078125, 0.00125)

Answer 2

事实证明，解决方案是将比例从0.01调整为0.001！

的简单情况。

更新的工作codepen

<img id="preview-img" width="100%" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" style="clip-path: url(&quot;#clipPolygon&quot;);" 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>