如何将clipPath缩放到svg边界框

时间：2017-11-13 22:58:45

标签： svg clip

我试图在我的图像上添加六边形，这很好，但是，svg路径大小远远大于我想要的图像大小。我希望clipPath在加载时为108px 120px。对于视网膜来说，我的图像是240x240，所以它应该缩小到120px×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中创建蒙版，但我试图以这种方式挑战自己。

1 个答案:

答案 0 :(得分：0)

很少有人纠正你的第一个选择。添加视口svg - width="240" height="240" 并为clippath 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>

相关问题
最新问题