SVG 剪切路径缩放

Posted 2023-03-23

【中文标题】SVG 剪切路径缩放

【英文标题】：SVG clipping path scaling

【发布时间】：2018-07-18 17:35:10

【问题描述】：

我目前正在尝试获取带有 SVG 剪切路径的图像以随浏览器缩放（图像需要是浏览器宽度的 100%）。我在几个地方读到同时应用clipPathUnits="objectBoundingBox" 和transform="scale(0.01)" 是解决方案，但是我无法让它工作。每当我应用这些时，图像就会消失。

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

Codepen

HTML

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

如果你删除上面提到的两个属性，图像会显示，但是我需要图像和路径随浏览器缩放。

【问题讨论】：

在你的css中移动<style>标签

@Bart 哎呀，完成

你的 codepen 什么都没有显示...更正它或把你的代码放在这里

@TemaniAfif 是的，它确实没有显示任何内容，而这正是这里的问题。如果您删除我提到的属性，图像会显示。

objectBoundingBox 单位的范围从 0 到 1，因此 points="317 343,966 254,964 -6,610 -5" 都大大超出范围，即使除以 100 时也是如此。即 317 变为 3。

【参考方案1】：

选择合适的规模：

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

scale(1/x, 1/y)

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

scale(0.00078125, 0.00125)

【参考方案2】：

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

Updated working codepen

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