Need help editing svg via javascript

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Need help editing svg via javascript

333666999
In my HTML file, I have
object id="graph" data="graph.svg" type="image/svg+xml"
*I left out brackets because it was treated by forum as code

graph.svg has
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" onload="init();">
  <script type="text/javascript"> <![CDATA[ function init() { var svgRoot = document.documentElement; var circle = document.createElementNS(svgRoot.getAttribute("xmlns"), "circle"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "100"); circle.setAttribute("r", "50"); circle.setAttribute("stroke", "blue"); circle.setAttribute("stroke-width", "3"); circle.setAttribute("fill", "red"); svgRoot.appendChild(circle); } ]]> </script></svg>


The image shows up correctly in the HTML. Now, I need to know how to modify the attributes that I am manually setting. I searched the web and could only find ways to modify the svg via embed. Any suggestions are appreciated. thanks.
Reply | Threaded
Open this post in threaded view
|

Re: Need help editing svg via javascript

Jeff Schiller
I wrote a few articles on dev.opera.com, the first of which deals with
this very question (on page 2 of the artcile):
http://dev.opera.com/articles/view/svg-evolution-not-revolution/

On Jul 11, 9:39 pm, 333666999 <[hidden email]> wrote:

> In my HTML file, I have
>
> graph.svg has
> <?xml version="1.0" encoding="UTF-8"?>
> <svg xmlns="http://www.w3.org/2000/svg" onload="init();">
>   <script type="text/javascript">
>   <![CDATA[
>     function init()
>     {
>       var svgRoot = document.documentElement;
>       var circle = document.createElementNS(svgRoot.getAttribute("xmlns"),
> "circle");
>
>       circle.setAttribute("cx", "100");
>       circle.setAttribute("cy", "100");
>       circle.setAttribute("r", "50");
>       circle.setAttribute("stroke", "blue");
>       circle.setAttribute("stroke-width", "3");
>       circle.setAttribute("fill", "red");
>
>       svgRoot.appendChild(circle);
>     }
>   ]]>
>   </script>
> </svg>
>
> The image shows up correctly in the HTML. Now, I need to know how to modify
> the attributes that I am manually setting. I searched the web and could only
> find ways to modify the svg via embed. Any suggestions are appreciated.
> thanks.
> --
> View this message in context:http://www.nabble.com/Need-help-editing-svg-via-javascript-tp18415431...
> Sent from the Mozilla - SVG mailing list archive at Nabble.com.

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Need help editing svg via javascript

333666999
Thank you again! I got it to work.