Question

这是我的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<script type="text/ecmascript">
<![CDATA[
function changeRectColor(evt) {
var centerX = Math.round(Math.random() * 255);
var centerY = Math.round(Math.random() * 255);      
evt.target.setAttributeNS(null,"cx",centerX);
evt.target.setAttributeNS(null,"cy",centerY);
}
]]>
</script>

<defs>
<mask maskType="luminance" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/9/97/C130-boarding.jpg" height="1" width="1" y="0" x="0" />
</mask>
</defs>

<g>
<circle cx="50" cy="20" r="50" fill="red" mask="url(#m1)" onclick="changeRectColor(evt)"/>
</g>

</svg>

当您点击红色圆圈时，它会改变位置。这一点很好。

问题：我把它掩盖成了一张照片。当圆圈移动时，蒙版/图片随之移动。我希望面具能够保持住。

注意：如果您了解我的问题，则下面是一些其他信息

如果我没有类似Javascript的功能，我可以将一个矩形屏蔽到圆圈和图像（使用父母），然后图像会说放，但我是AM，内部defs内的东西没有似乎喜欢Javascript。

Answer 1

使用maskUnits =“userSpaceOnUse”maskContentUnits =“userSpaceOnUse”

当然，您必须调整图像和蒙版的x，y，宽度和高度，因为它们将在用户坐标中而不是边界框坐标。

如何使<mask>保持在同一位置</mask>

1 个答案: