如何将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>