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 px图像的svg，正确的比例应为：

scale(0.00078125, 0.00125)

SVG剪切路径缩放

2 个答案: