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と表示されますが、私はAMであり、defs内のものは表示されません。 Javascriptが好きです。

4

1 に答える 1

2

maskUnits = "userSpaceOnUse" maskContentUnits="userSpaceOnUse"を使用します

もちろん、画像とマスクのx、y、幅、高さを調整する必要があります。これらは、境界ボックスの座標ではなく、ユーザーの座標になります。

于 2013-01-13T14:39:36.973 に答える