这是一件事。
我有一张 700x700 像素的图像,需要使用 SVG 进行 mask 。 对于 Chrome 和 Safari,我通过使用带有外部 SVG 的 -webkit-mask-box-image 来做到这一点并且它工作正常。 对于 Firefox,我使用了 clip-path 属性,并且再次正常运行。
响应部分有问题。在 Chrome 和 Safari 上,该部分运行良好,但在 Firefox 上,只有主图像被调整大小,掩码保持不变。 我在这方面完全是个新手,我尝试了很多在网上找到的解决方案,但我真的无法让它发挥作用。
<style>
body {
background: yellow;
}
.img-mask {
-webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
mask-border: url('http://imgh.us/mask_3.svg');
clip-path: url(#mask);
}
</style>
<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">
enter code here
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
<clipPath id="mask">
<path d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
</clipPath>
</svg>
如果有任何帮助,我们将不胜感激! fiddle 可以在这里找到 https://jsfiddle.net/y7zaw4bz/1/
最佳答案
您需要使用 objectBoundingBox 单位(并使路径从 0 到 1)例如
body {
background: yellow;
}
img {
width: 100%;
}
.img-mask {
-webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
mask-border: url('http://imgh.us/mask_3.svg');
clip-path: url(#mask);
}
<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">
<svg preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
<clipPath id="mask" clipPathUnits="objectBoundingBox">
<path transform="scale(0.0014)" d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
</clipPath>
</svg>
我在这里缩放了路径以更正单位 0.0014 大约是 1/700
关于css - Firefox 和响应式 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32767549/