如何使一個<mask>是停留在同一位置

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的功能一樣，我可能只是掩蓋一個矩形圓和的圖像（使用一些額外的信息一個父母），然後圖像會說，但我是，並且defs內的東西似乎不喜歡Javascript。

Answer 1

使用maskUnits =「userSpaceOnUse」 maskContentUnits =「userSpaceOnUse」

當然，你將不得不調整圖像和遮罩的X，Y，寬度和高度，然後，他們將在用戶座標而不是包圍盒子座標。