代码之家 › 专栏 › 技术社区 › wickywills

SVG裁剪路径缩放

clipping polygon svg css html

wickywills · 技术社区 · 7 年前

我目前正在尝试使用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>

如果删除上述两个属性,图像将显示,但我需要图像和路径随浏览器缩放。

2 回复 | 直到 7 年前

muri 6 年前

选择正确的规模 :

由于clipPathUnits=“userSpaceOnUse”使用原始路径的大小(以绝对像素为单位),而clipPathUnits=“objectBoundingBox”使用0到1作为坐标系,因此正确的比例为

scale(1/x, 1/y)

因此,对于坐标为1280x800 px图像的svg,正确的比例应为:

scale(0.00078125, 0.00125)

wickywills 7 年前

结果证明,解决方案是将刻度从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>

推荐文章