如何将clipPath缩放到svg边界框
如何将clipPath缩放到svg边界框
提问于 2017-11-13 22:58:44
我试图在我的图像上添加一个六边形的形状，它工作得很好，但是svg路径的大小比我预期的图像大小要大得多。我希望clipPath在加载时是108 px120px。我的图像是240x240，因为视网膜的缘故，所以它应该缩小到120 to到120 to，并填充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&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
Stack Overflow用户
回答已采纳
发布于 2017-11-13 23:43:30
很少有人纠正了你的第一个选择。添加viewport 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&s=240">
</foreignObject>
</svg>如果您需要响应的化身，请用百分比- width="25%" height="25%"替换数字视口svg。
<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&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&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&s=240" clip-path="url(#svgPath)" width="240" height="240"> </image> -->
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47274965
复制相关文章
相似问题
腾讯云开发者
