用于Firefox语法问题的CSS SVG掩码

Question

从Mozilla开发者页面，我尝试使用mask属性重新创建其CSS的SVG掩码。

CSS：

#canvasPreview { 
    mask: url(images/masks/circle2.svg#circleMask); 
} 

HTML：

<img id="canvasPreview" src="placehold.it/100x100"></img> 

SVG：

<svg> 
    <mask id="circleMask" maskContentUnits="objectBoundingBox"> 
     <circle cx="50" cy="50" r="50" fill="white" /> 
    </mask> 
</svg> 

的SVG是外部引用，而不是嵌入像MDN例子。我没有尝试嵌入它，但我不明白为什么这会有所帮助。有几件事我不清楚。

1. 在CSS中，为什么要在URL后加上#circleMask标识符？删除它不会使我的代码工作，并且它的包含在MDN网站规范中找到，所以我将它放在那里。

2. 我的SVG是否正确？我必须使用<mask>标签和id和objectBoundingBox属性吗？他们用于什么？

Answer 1

URL中＃后面的部分必须与掩码的id相同。所以你有这个权利。

如果你想使用objectBoundingBox，但你的内容看起来不对，你可以使用objectBoundingBox。你的掩码半径是它掩盖对象大小的50倍。也许你的意思是50％。与cx和cy相同。