在 Mozilla 开发者页面上,我正在尝试使用 mask
为 CSS 重新创建他们的 SVG 掩码。属性(property)。
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 示例那样嵌入的。我没有尝试嵌入它,但我不明白为什么这会有所帮助。有几件事我不清楚。
在 CSS 中,为什么我要将 #circleMask 标识符放在 URL 之后?删除它不会使我的代码正常工作,它包含在 MDN 站点规范中,所以我把它放在那里。
我的 SVG 正确吗?我必须使用
<mask>
吗?标记和id
和objectBoundingBox
属性?它们有什么用?
最佳答案
URL中#后的部分必须与mask的id一致。所以你说对了。
您可以根据需要使用 objectBoundingBox,但您的内容似乎有误。您的蒙版半径是其蒙版对象大小的 50 倍。也许你的意思是 50%。与 cx 和 cy 相同。
关于Firefox 语法问题的 CSS SVG 掩码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13048723/