如何将 clipPath 缩放到 svg 边界框

Question

我正在尝试在我的图像上添加一个六边形形状，效果很好，但是，svg 路径大小比我预期的图像大小大得多。我希望 clipPath 在加载时为 108px 120px。为了视网膜的缘故，我的图像是 240x240，所以它应该缩小到 120px x 120px 并填充 clipPath。

<svg width="108" height="120" viewBox="0 0 108 120">
  <defs>
    <clipPath id="svgPath">
      <path d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#svgPath)" width="100%" height="100%">
    <img src="https://avatars3.githubusercontent.com/u/5648875?v=2&amp;s=240">
  </foreignObject>
</svg>

到目前为止，我已经对 clipPath 应用了转换，效果更好，但它无论如何都不是像素完美的，所以我决定继续寻找。我还一度转换了使用 objectBoundingBox 的路径（就是这个）

M0.751144482874 0.107142857143Q0.883699391617 0 1.01625430036 0.107142857143L1.63484387449 0.607142857143Q1.76739878323 0.714285714286 1.76739878323 0.928571428571L1.76739878323 1.92857142857Q1.76739878323 2.14285714286 1.63484387449 2.25L1.01625430036 2.75Q0.883699391617 2.85714285714 0.751144482874 2.75L0.132554908743 2.25Q0 2.14285714286 0 1.92857142857L0 0.928571428571Q0 0.714285714286 0.132554908743 0.607142857143Z

我认为这将使我能够将 clipPath 扩展到 SVG 容器，但它没有用。否则，我已经在 img、foreignObject、clipPath 和 svg 上尝试使用宽度和高度来尝试做我想做的事情。我也搞砸了 viewBox。无论如何，我一直在 Safari 上进行测试，所以这可能是我问题的一部分，但我希望如果它在 Safari 中工作，它也能在 Firefox 和 Chrome.

中工作

有人有这方面的经验吗？我可能只需要在 Photoshop 中创建蒙版，但我试图挑战自己这样做。

Answer 1

很少有人纠正你的第一个选项。添加视口 svg - width="240" height="240" 并向剪辑路径添加了一个转换 transform="translate(30 0) scale(1.2)"

<svg width="240" height="240" viewBox="0 0 240 240">
  <defs>
    <clipPath id="svgPath" transform="translate(15 0) scale(1.2)">
      <path d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#svgPath)" width="100%" height="100%">
    <img src="https://avatars3.githubusercontent.com/u/5648875?v=2&amp;s=240">
  </foreignObject>
</svg>

如果您需要响应式头像，请将数字视口 svg 替换为百分比 - width="25%" height="25%"

<svg width="25%" height="25%" viewBox="0 0 240 240">
  <defs>
    <clipPath id="svgPath" transform="translate(15 0) scale(1.2)">
      <path d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#svgPath)" width="100%" height="100%">
    <img src="https://avatars3.githubusercontent.com/u/5648875?v=2&amp;s=240">
  </foreignObject>
</svg>

选项没有 <foreignObject>

<svg width="50%" height="50%" viewBox="0 0 240 240">
  <defs>
    <clipPath id="svgPath" transform="translate(15 0) scale(1.2)">
      <path d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>
    </clipPath>
  </defs>
 

  <image xlink:href="https://avatars3.githubusercontent.com/u/5648875?v=2&amp;s=240" clip-path="url(#svgPath)" width="240" height="240"> </image>
  </svg>

UPD

如有必要，您可以更改图片相对于框架的比例和位置，更改图像变换命令的位数

transform="translate(15 0) scale(1.2)"

带有阴影的头像示例

作为阴影，将使用第二个六边形，它相对于第一个六边形向右和向下移动 4 个像素。

六边形的边缘被高斯滤镜模糊了。

<filter id="Filtershadow" height="120%" width="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>

<svg width="50%" height="50%" viewBox="0 0 300 300">
  <defs>
    <clipPath id="svgPath" transform="translate(10 0) scale(1.2)">
      <path d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>
    </clipPath> -->
  
  <filter id="Filtershadow" height="120%" width="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
  </defs>
  
  <path id="shadow" transform="translate(14 4) scale(1.2)" fill="grey"  filter="url(#Filtershadow)" d="M73.61215932167728 7.499999999999999Q86.60254037844386 0 99.59292143521044 7.5L160.21469970012114 42.5Q173.20508075688772 50 173.20508075688772 65L173.20508075688772 135Q173.20508075688772 150 160.21469970012114 157.5L99.59292143521044 192.5Q86.60254037844386 200 73.61215932167728 192.5L12.990381056766578 157.5Q0 150 0 135L0 65Q0 50 12.99038105676658 42.5Z"></path>

  <image xlink:href="https://avatars3.githubusercontent.com/u/5648875?v=2&amp;s=240" clip-path="url(#svgPath)" width="240" height="240"> </image> -->
  </svg>

如何将 clipPath 缩放到 svg 边界框

How to scale clipPath to svg bounding box

svg

clip