我正在尝试使用我在 html 内容中创建的 SVG 形状进行一些非常简单的 mask 测试。 我尝试过不同的选项:
- 掩码，-webkit-掩码
- 掩码图像，-webkit-掩码图像
- 不同的 MaskUnit 和 MaskContentUnit
- mask-type:是否亮度
我无法让它发挥作用，我必须做一些错误和愚蠢的事情。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with SVG</title>
<link rel="stylesheet" href="/style.css" />
<style>
.testMask {
-webkit-mask-image: url(#torch);
mask-image:url(#torch);
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<mask id="torch">
<circle cx="0.5" cy="0.5" r="0.1" fill="white" />
</mask>
</defs>
</svg>
<div id="mainPage">
<img src="/img/Japan.jpg" class="testMask">
</div>
</body>
是不是有什么问题啊？ 第二个问题是，有没有办法通过js改变mask坐标？我希望它跟随鼠标指针。
谢谢!
最佳答案
<mask> 的默认单位内容元素为objectBoundingBox (即 maskContentUnits="objectBoundingBox" )。在此模式下，作为 mask 一部分的元素中使用的坐标相对于边界框。换句话说，(0,0) 位于左上角，(1,1) 位于右下角。
所以你的 (50,50) 处的圆远离蒙版边缘。
最好坚持使用 objectBoundingBox 单位，因此请尝试以下操作:
<mask id="torch" >
<circle cx="0.5" cy="0.5" r="0.1" fill="white" />
</mask>
注意:
使用内联 SVG 进行 mask 可以在 Firefox 中使用(请参阅 http://jsfiddle.net/dv6mx96t/ )，但不能在 Chrome 中使用。对于跨浏览器工作的蒙版，您需要使用外部图像。该图像可以是 SVG 或 PNG 等。
例如:
.testMask {
mask: url(mask.svg);
}
其中mask.svg是:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
<circle cx=".5" cy=".5" r=".35" fill="white" />
</svg>
关于html - 使用 html 中定义的 svg mask 进行 mask ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31089898/