1

Here's my code:

<?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>

When you click on the red circle, it changes position. That bit works fine.

PROBLEM: I've masked it to a picture. When the circle moves, the mask/picture moves with it. I want the mask to STAY PUT.

NOTE: If you understand my problem, then below is some additional information

If I didn't have the Javascript like function, I could just mask a rectangle to the circle AND to the image (using a parent), and then the image would say put, but I AM, and stuff inside defs doesn't seem to like Javascript.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
Maurice Tempelsman
  • 895
  • 2
  • 11
  • 13

1 Answers1

2

Use maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"

Of course you'll have to adjust the x, y, width and height of the image and mask as they will then be in user co-ordinates rather than bounding box co-ordinates.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242