Html 将“剪辑路径”与图像对齐

我在使用SVG剪辑路径时遇到一些问题。我不知道如何使路径与我正在剪辑的图像对齐-它总是离我很远。这是我的标记：

HTML

<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
  <svg height="0" width="0">
    <defs>
      <clipPath id="svgPath">
        <path d="M124.8,656.7H142V501.9c65.5-27.5,53.6,10.8,129,4.7v150.1h17.2v20.7H124.8V656.7z"/>
      </clipPath>
    </defs>
  </svg>

这里有一个密码笔：

如果向下滚动，您将看到我正在使用的SVG大纲。理想情况下，我希望它集中在图像上，尽管左上角也可以。事实上，我无法理解定位背后的逻辑

谢谢

---

Mike

将剪辑路径应用于HTML元素时，强烈建议您使用

objectBoundingBox

坐标空间，而不是默认的用户空间坐标（

userSpaceOnUse

）

在

objectBoundingBox

单元中，坐标直接映射到剪辑应用到的对象。所以（0,0）表示对象的左上角，（1,1）映射到对象的右下角

所以，如果你坚持在这个范围内的坐标，你的剪辑路径保证直接落在你的图像上

这里有一个简单的钻石剪辑路径演示。我将让您将形状转换为

objectBoundingBox

坐标

.svg已剪裁{
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
}

---

将剪辑路径应用于HTML元素时，强烈建议您使用

objectBoundingBox

坐标空间，而不是默认的用户空间坐标（

userSpaceOnUse

）

在

objectBoundingBox

单元中，坐标直接映射到剪辑应用到的对象。所以（0,0）表示对象的左上角，（1,1）映射到对象的右下角

所以，如果你坚持在这个范围内的坐标，你的剪辑路径保证直接落在你的图像上

这里有一个简单的钻石剪辑路径演示。我将让您将形状转换为

objectBoundingBox

坐标

.svg已剪裁{
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
}

Ah好的，我明白了-你有什么技巧可以让我用

objectBoundingBox

坐标转换/生成SVG吗？我在插图器工作，但也可以有草图/亲和设计师。事实上，你可以。您可以使用

变换

将路径缩小到[0..1]范围。如果要避免转换，另一个选项是在Illustrator中创建类似100x100艺术板的东西。将形状移动到其中，并另存为SVG。然后从该文件复制

d

属性，但正如您所做的那样，将所有坐标除以100。明白了-我想我将使用第二个选项来实现最简单的实现。谢谢你花时间帮忙！啊，好的，我明白了-你有什么技巧可以让我用

objectBoundingBox

坐标转换/生成SVG吗？我在插图器工作，但也可以有草图/亲和设计师。事实上，你可以。您可以使用

变换

将路径缩小到[0..1]范围。如果要避免转换，另一个选项是在Illustrator中创建类似100x100艺术板的东西。将形状移动到其中，并另存为SVG。然后从该文件复制

d

属性，但正如您所做的那样，将所有坐标除以100。明白了-我想我将使用第二个选项来实现最简单的实现。谢谢你花时间帮忙！

.svg-clipped {
 -webkit-clip-path: url(#svgPath);
 clip-path: url(#svgPath);
}