H
Holger Jeromin
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 addCircleFirstRun (){
Node = document.createElement('svg:circle');
Node.setAttribute("cy", "50", 0);
Node.setAttribute("r", "5", 0);
Node.setAttribute("cx", xPosition, 0);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}
function addCircleRunTime(){
Node = document.createNode(1, "svg:circle",
"http://www.w3.org/2000/svg");
Node.setAttribute("cy", "50");
Node.setAttribute("r", "5");
Node.setAttribute("cx", xPosition);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}
</script>
</head>
<body>
<p>
<input onclick="addCircleRunTime()" type="button" value="Add Element">
</p>
<p>
<svg:svg id="svgfeld" width="500" height="100">
<svg
olyline points="0,10 8,20 16,0" style="stroke:green;fill:none;"/>
<svg:circle cx="5" cy="50" r="5" />
</svg:svg>
</p>
<script type="text/javascript">
addCircleFirstRun();
</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 addCircleRunTime function with the
Namespace aware createNode.
Can someone help me?
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 addCircleFirstRun (){
Node = document.createElement('svg:circle');
Node.setAttribute("cy", "50", 0);
Node.setAttribute("r", "5", 0);
Node.setAttribute("cx", xPosition, 0);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}
function addCircleRunTime(){
Node = document.createNode(1, "svg:circle",
"http://www.w3.org/2000/svg");
Node.setAttribute("cy", "50");
Node.setAttribute("r", "5");
Node.setAttribute("cx", xPosition);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}
</script>
</head>
<body>
<p>
<input onclick="addCircleRunTime()" type="button" value="Add Element">
</p>
<p>
<svg:svg id="svgfeld" width="500" height="100">
<svg
olyline points="0,10 8,20 16,0" style="stroke:green;fill:none;"/><svg:circle cx="5" cy="50" r="5" />
</svg:svg>
</p>
<script type="text/javascript">
addCircleFirstRun();
</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 addCircleRunTime function with the
Namespace aware createNode.
Can someone help me?