need help getting svg file to display in firefox

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

need help getting svg file to display in firefox

333666999
This post was updated on .
Hello. I have been reading about SVG and developed a small test image. It was working a few days ago, but no longer works. I can't figure out what is wrong. I am using the latest Firefox. Here is the code. I appreciate any suggestions.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" onload="init();">
<script type="text/javascript"><![CDATA[ function init() { var SVG_NS = "http://www.w3.org/2000/svg"; var circle = document.createElementNS(SVG_NS, "circle"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "50"); circle.setAttribute("r", "100"); circle.setAttribute("stroke", "blue"); circle.setAttribute("stroke-width", "3"); circle.setAttribute("fill", "red"); } ]]></script></svg>

Problem Solved. Thank you both! I have submitted another question regarding a different issue I have come across.
Reply | Threaded
Open this post in threaded view
|

Re: need help getting svg file to display in firefox

Bjoern Hoehrmann-2
* 333666999 wrote in mozilla.dev.tech.svg:
>Hello. I have been reading about SVG and developed a small test image. It was
>working a few days ago, but no longer works. I can't figure out what is
>wrong. I am using the latest Firefox. Here is the code. I appreciate any
>suggestions.

Generally, you should specify what happens, and what you expect to
happen instead. In this example:

><?xml version="1.0" encoding="UTF-8"?>
><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
><svg xmlns="http://www.w3.org/2000/svg" onload="init();">
><script type="text/javascript"><![CDATA[
>function init()
>{
>var SVG_NS = "http://www.w3.org/2000/svg";
>var circle = document.createElementNS(SVG_NS, "circle");
>circle.setAttribute("cx", "100");
>circle.setAttribute("cy", "50");
>circle.setAttribute("r", "100");
>circle.setAttribute("stroke", "blue");
>circle.setAttribute("stroke-width", "3");
>circle.setAttribute("fill", "red");
>
>}
>]]></script>
></svg>

You create a circle element, but never append it to the document. If you
expect the circle to show up somewhere, you have to use e.g. appendChild
to add it to the document.
--
Björn Höhrmann · mailto:[hidden email] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 
_______________________________________________
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 getting svg file to display in firefox

Jeff Schiller
1) What Bjoern said.  You need to append it to the document after
you've created the circle:

document.documentElement.appendChild(circle);

2) Also, unlike HTML Canvas, you can take advantage of SVG's
declarative markup so instead of all those lines of code if you just
need a simple circle, write:

<svg xmlns="http://www.w3.org/2000/svg">
  <circle id="mycircle" cx="100" cy="50" r="100" stroke="blue" stroke-
width="3" fill="red" />
</svg>

Or if you need to script some things, declare the circle first in
markup and then tweak the attributes you need to in script later.

3) You don't really need the DTD

4) As you'll play aroudn with SVG, you'll quickly find out that you
need to declare the XLink namespace too on the SvG element.  Generally
I start writing all my SVG documents this way:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/
1999/xlink">
</svg>

2000 is SVG, 1999 is XLink - pretty easy to remember.

Regards,
Jeff

On Jul 11, 8:00 pm, Bjoern Hoehrmann <[hidden email]> wrote:

> * 333666999 wrote in mozilla.dev.tech.svg:
>
> >Hello. I have been reading about SVG and developed a small test image. It was
> >working a few days ago, but no longer works. I can't figure out what is
> >wrong. I am using the latest Firefox. Here is the code. I appreciate any
> >suggestions.
>
> Generally, you should specify what happens, and what you expect to
> happen instead. In this example:
>
>
>
> ><?xml version="1.0" encoding="UTF-8"?>
> ><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> >"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> ><svg xmlns="http://www.w3.org/2000/svg" onload="init();">
> ><script type="text/javascript"><![CDATA[
> >function init()
> >{
> >var SVG_NS = "http://www.w3.org/2000/svg";
> >var circle = document.createElementNS(SVG_NS, "circle");
> >circle.setAttribute("cx", "100");
> >circle.setAttribute("cy", "50");
> >circle.setAttribute("r", "100");
> >circle.setAttribute("stroke", "blue");
> >circle.setAttribute("stroke-width", "3");
> >circle.setAttribute("fill", "red");
>
> >}
> >]]></script>
> ></svg>
>
> You create a circle element, but never append it to the document. If you
> expect the circle to show up somewhere, you have to use e.g. appendChild
> to add it to the document.
> --
> Björn Höhrmann · mailto:[hidden email] ·http://bjoern.hoehrmann.de
> Weinh. Str. 22 · Telefon: +49(0)621/4309674 ·http://www.bjoernsworld.de
> 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 ·http://www.websitedev.de/

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg