Firefox和响应式SVG

这是一件事情。Firefox和响应式SVG

我有一个700x700px的图像，我需要用SVG掩盖。对于Chrome和Safari，我通过将-webkit-mask-box-image与外部SVG一起使用，并且它可以正常工作。对于Firefox，我使用了clip-path属性，并且它的功能正常。

响应部分是问题。在Chrome浏览器中，该部分运行良好，但在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/

来源

2015-09-24 This and that

[MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image）说的是“-webkit-mask-box-image”，“这个功能是非标准的，不在标准的轨道上，不要在生产中使用它网站面向网络“ –

您需要使用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路径是大致700分之1

来源

2015-09-24 17:51:10

哇罗伯特，谢谢你一百万次，这是我之后:) 只是一个问题。如果图像是250x300，如何我得到比例因子？我是否将数字1与宽度或？因为我在另一个面具上尝试过，并且一旦它缩放，它就会被切断... –

您可以给两个参数进行缩放，所以它会是比例尺（1/200,1/300），您需要计算这些参数值。 –

啊，非常感谢你罗伯特！享受你的一天！ –

Firefox和响应式SVG

回答

相关问题