Martin Honnen schrieb am 24.04.2008 17:28:
For IE and Adobe SVG viewer you can code it like this:
[...]
[...]
--
Mit freundlichen Grüßen
Holger Jeromin
-
Guest repliedRe: Adding SVG via Javascript in Explorer
Martin Honnen schrieb am 24.04.2008 17:28:
Perfekt. Thanks a lot!
--
Mit freundlichen Grüßen
Holger Jeromin
-
Guest repliedRe: Adding SVG via Javascript in Explorer
Holger Jeromin wrote:
For IE and Adobe SVG viewer you can code it like this:function addCircleRunTim e(){
Node = document.create Node(1, "svg:circle ",
"http://www.w3.org/2000/svg");
Node.setAttribu te("cy", "50");
Node.setAttribu te("r", "5");
Node.setAttribu te("cx", xPosition);
document.getEle mentById("svgfe ld").appendChil d(Node);
xPosition = xPosition + 10;
}
function addCircleRunTim e(){
var svgDoc = document.getEle mentById('svgfe ld').getSVGDocu ment();
var circle = svgDoc.createEl ementNS('http://www.w3.org/2000/svg',
'circle');
circle.setAttri buteNS(null, 'cx', xPosition);
circle.setAttri buteNS(null, 'cy', '50');
circle.setAttri buteNS(null, 'r', '5');
svgDoc.document Element.appendC hild(circle);
xPosition = xPosition + 10;
}
--
Martin Honnen
Leave a comment:
-
Adding SVG via Javascript in Explorer
Hello,
i need to add SVG things direct in a Website. I know XHTML is best used
for that, with works nice in Firefox and Opera.
Internet Explorer is more challenging...
I have ported my XHTML example to HTML. I am able to manipulate the CSS
in my Adobe SVG-Viewer 3 via Javascript.
The IE is working in Quirksmode (no Doctype) so it will display SVG
inline my HTML code.
---------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http ://www.w3.org/2000/svg" xml:lang="en">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>SVG Test incl DOM Manipulation</title>
<object id="AdobeSVG"
classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation= "#AdobeSVG" ?>
<script type="text/javascript">
xPosition = 10;
function addCircleFirstR un (){
Node = document.create Element('svg:ci rcle');
Node.setAttribu te("cy", "50", 0);
Node.setAttribu te("r", "5", 0);
Node.setAttribu te("cx", xPosition, 0);
document.getEle mentById("svgfe ld").appendChil d(Node);
xPosition = xPosition + 10;
}
function addCircleRunTim e(){
Node = document.create Node(1, "svg:circle ",
"http://www.w3.org/2000/svg");
Node.setAttribu te("cy", "50");
Node.setAttribu te("r", "5");
Node.setAttribu te("cx", xPosition);
document.getEle mentById("svgfe ld").appendChil d(Node);
xPosition = xPosition + 10;
}
</script>
</head>
<body>
<p>
<input onclick="addCir cleRunTime()" type="button" value="Add Element">
</p>
<p>
<svg:svg id="svgfeld" width="500" height="100">
<svg:polyline points="0,10 8,20 16,0" style="stroke:g reen;fill:none; "/>
<svg:circle cx="5" cy="50" r="5" />
</svg:svg>
</p>
<script type="text/javascript">
addCircleFirstR un();
</script>
</body></html>
---------------------------------------------------------
I want to add a new circle Node to the SVG Tree. The first works as
expected, but the same function called by the button does not work.
I had no luck in building a working addCircleRunTim e function with the
Namespace aware createNode.
Can someone help me?
--
best regards
Holger Jeromin
Leave a comment: