Question

这是一件事。

我有一个700x700px的图像，我需要用SVG掩盖。对于Chrome和Safari，我通过使用-webkit-mask-box-image和外部SVG来实现这一点，并且它可以正常工作。对于Firefox，我使用了clip-path属性，并且它再次正常运行。

响应部分是问题。在Chrome＆amp; 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>

真的非常感谢任何帮助！小提琴可以在https://jsfiddle.net/y7zaw4bz/1/

找到

Answer 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

Firefox和响应式SVG

1 个答案: