1

这是我的代码：

<?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 的函数，我可以将一个矩形屏蔽到圆和图像（使用父级），然后图像会说 put，但我是，并且 defs 中的东西似乎没有喜欢 Javascript。

4

1 回答 1

2

使用 maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"

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

于 2013-01-13T14:39:36.973 回答