使用 SVG 蒙版重新定位和调整图像大小 [重复]

Question

我一直在搞乱 SVG 蒙版，在阅读了几篇文章并测试了一些代码以获得更高级的蒙版（不仅仅是简单的多边形）之后，我想出了这个：

<div class="picture">
  <img src="https://i.postimg.cc/0Njq2C60/bartrix.png"
    alt="" style="clip-path: url(#myClip)">
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <path id="blob" fill="none"
            d="M351,264.5Q338,279,387.5,332.5Q437,386,400.5,396Q364,406,324,380.5Q284,355,267,420Q250,485,225.5,443Q201,401,158,418.5Q115,436,82,416Q49,396,112.5,335Q176,274,100,262Q24,250,75,230Q126,210,100,166Q74,122,135.5,150Q197,178,197.5,134Q198,90,224,60Q250,30,275.5,62Q301,94,314.5,118.5Q328,143,348,153.5Q368,164,397.5,178Q427,192,395.5,221Q364,250,351,264.5Z" />
    </clipPath>
  </defs>
</svg>

看起来很不错，但我偶然发现了两个问题：

1. 如您所见，此测试中使用的图像在蒙版的可见部分中定位得并不好。因此我想知道是否可以重新定位它
2. 它很大！因为我不太熟悉 SVG，所以我无法调整它的大小，因为通常的属性对父级 (.picture) 没有任何作用，在 SVG 本身中，如果应用于图像，它就会消失。使用transform 重新缩放它，虽然可行，但我非常怀疑这是正确的方法。

因此，总而言之，我如何屏蔽 任何 图像，在此蒙版内调整它而不编辑图像本身（这是最理想的 - 一个适用于图像而不是图像的代码适用于代码，如果您知道我的意思）。

如果有任何机会可以使用任何其他面具，那就更好了。这个形状是我能找到的最好的形状之一，但我还有其他几个要测试。

Answer 1

您可以使用 clipPath 的 transform 属性

eq:transform="translate(0, -20) scale(0.7, 0.6)"

Docs here

<div class="picture">
  <img src="https://i.postimg.cc/0Njq2C60/bartrix.png"
    alt="" style="clip-path: url(#myClip)">
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip" transform="translate(0, -20) scale(0.7, 0.6)">
      <path id="blob" fill="none"
            d="M351,264.5Q338,279,387.5,332.5Q437,386,400.5,396Q364,406,324,380.5Q284,355,267,420Q250,485,225.5,443Q201,401,158,418.5Q115,436,82,416Q49,396,112.5,335Q176,274,100,262Q24,250,75,230Q126,210,100,166Q74,122,135.5,150Q197,178,197.5,134Q198,90,224,60Q250,30,275.5,62Q301,94,314.5,118.5Q328,143,348,153.5Q368,164,397.5,178Q427,192,395.5,221Q364,250,351,264.5Z" />
    </clipPath>
  </defs>
</svg>

Answer 2

首先我想知道用作剪切路径的路径的大小和位置。为此，我使用 getBBox() 方法。这就是我为你的#blob 得到的：

height: 414.00213623046875
width: 361.4715881347656
x: 54.519683837890625
y: 45.48387145996094

我想使用clipPathUnits="objectBoundingBox"，在这种情况下

该值表示元素内的所有坐标都相对于应用剪切路径的元素的边界框。即坐标系的原点是物体边界框的左上角，物体边界框的宽度和高度被认为是长度为1个单位的值。

阅读更多关于clipPathUnits

由于我想要一个 1/1 的边界弓，我将在 x 中缩放路径 1/361 = 0.0028，在 y 中缩放 1/414 = 0.0024（361 是路径边界框的宽度，414 是高度）。但是现在我有另一个问题：用于剪切的路径的边界框从 x=54 和 y=45 开始。所以我需要翻译回路径translate(-54,-45)

我正在使用边界框的四舍五入值（请参阅 javascript）。您可能想要使用确切的值。

现在您可以随意调整图像大小，例如 width="200" height="200" 或者您可以选择像 img{width:45vw; height:45vw} 这样的值

div,svg{display:inline}

img,.visible{width:45vw; height:45vw}

<svg width="0" height="0">
  <defs>
  <path id="blob"  d="M351,264.5Q338,279,387.5,332.5Q437,386,400.5,396Q364,406,324,380.5Q284,355,267,420Q250,485,225.5,443Q201,401,158,418.5Q115,436,82,416Q49,396,112.5,335Q176,274,100,262Q24,250,75,230Q126,210,100,166Q74,122,135.5,150Q197,178,197.5,134Q198,90,224,60Q250,30,275.5,62Q301,94,314.5,118.5Q328,143,348,153.5Q368,164,397.5,178Q427,192,395.5,221Q364,250,351,264.5Z" />
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <use xlink:href="#blob" transform="scale(0.0028,0.0024) translate(-54,-45)"/>
    </clipPath>
  </defs>
</svg>


<div class="picture">
  <img src="https://i.postimg.cc/0Njq2C60/bartrix.png" alt="whatever" style="clip-path: url(#myClip)">
</div>

<svg viewBox="0 0 414 414" class="visible">
 <image xlink:href="https://i.postimg.cc/0Njq2C60/bartrix.png" width="414" height="414"/>
 <use xlink:href="#blob" transform="translate(-54,-45)" fill="none" stroke="gold" stroke-width="4" />
</svg>