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

原来解决方案是将比例从 0.01 调整到 0.001 的简单案例！

Updated working 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>

Answer 2

选择合适的规模:

由于clipPathUnits="userSpaceOnUse"使用原始路径的大小（以绝对像素为单位）并且clipPathUnits="objectBoundingBox"使用0到1作为坐标系，正确的比例是

scale(1/x, 1/y)

因此对于坐标为 1280x800 像素图像的 svg，正确的比例为：

scale(0.00078125, 0.00125)

SVG 剪切路径缩放

SVG clipping path scaling

html

css

svg

clipping

polygon