lewisje / svgweb

Automatically exported from code.google.com/p/svgweb
Other
0 stars 0 forks source link

Changing gradient stop does not trigger redraw of referencing elements #483

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
hello,

this seems like it should be simple but i am stumped. i've created a
simple test case below to illustrate my problem. i do not seem to be
able to modify stop-color or stop-opacity values of svg inside an
OBJECT element for ie+svgweb

i'm using contentDocument as described in the svgweb user manual.
script works fine in other svg supporting browsers. i've tried
both .setAttribute('stop-color', color); and .style.stopColor = color;
methods to no avail. any help would be greatly appreciated.

thanks for your ongoing work with this excellent project.

harvey

<html>
<head>
<title>Stop Change Test</title>

<meta name="svg.render.forceflash" content="false" />
<script src="../svgweb/src/svg.js" data-path="../svgweb/src/"></script>
<script type="text/javascript">

function changeStopColor(stopcolr, stop){
var svgElm = document.getElementById('testSVG');
var doc = svgElm.contentDocument;
var stopElm = doc.getElementById(stop);
stopElm.setAttribute('stop-color', stopcolr);
}

function changeFillColor(fillcolor){
var svgElm = document.getElementById('testSVG');
var doc = svgElm.contentDocument;
var stopElm = doc.getElementById('circ2');
stopElm.setAttribute('fill', fillcolor);
}

</script>
</head>
<body>

<a href="javascript: changeStopColor('#ff0000', 's1');">change
stop1</a><br><br>
<a href="javascript: changeStopColor('#0000ff', 's2');">change
stop2</a><br><br>
<a href="javascript: changeFillColor('#0000ff');">change fill</a><br><br>

<!--[if IE]>
<object id="testSVG" src="grad.svg" classid="image/svg+xml"
width="200" height="400">
<![endif]-->
<!--[if !IE]>-->
<object id="testSVG" data="grad.svg" type="image/svg+xml" width="200"
height="400">
<!--<![endif]-->
</object>

</body>
</html>

----------------------- grad.svg -----------------------------

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200px" height="400px"  viewBox="0 0 200 400" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<radialGradient cx="0.5" cy="0.5" r="1" fx="0.5" fy="0.5" id="grad1" >
<stop  id="s1" offset="0" stop-opacity="1" stop-color="#000000" />
<stop  id="s2" offset="1" stop-opacity="1" stop-color="#ffffff" />
</radialGradient>

<circle id="circ1" fill="url(#grad1)" cx="100px" cy="100px" r="100px"/>
<circle id="circ2" fill="#ff0000" cx="100px" cy="300px" r="100px"/>

</svg>

What is the expected output? What do you see instead?
Clicking the links should change the stops. They do not.

Original issue reported on code.google.com by grick23@gmail.com on 27 Apr 2010 at 3:33

GoogleCodeExporter commented 8 years ago
Fixed in r1128.

Original comment by grick23@gmail.com on 27 Apr 2010 at 3:37