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
Original issue reported on code.google.com by
grick23@gmail.com
on 27 Apr 2010 at 3:33