SVG doesn't raise events when embedded in HTML

Discussion in 'XML' started by Pretty woman, Dec 17, 2003.

  1. Pretty woman

    Pretty woman Guest

    Hi,

    I am new to web technologies, including HTML, SVG and javascript. I
    followed the courses for these languages on www.w3schools.com. I have
    a question about events raised by a SVG document. The SVG is embedded
    in an HTML source.

    I made a simple SVG file that contains a red circle with a black
    outline. I also wrote a javascript that turns the outline color red.
    The function is called by the onmouseover event from the circle. It
    all works properly when I open the SVG seperately in IE5. However,
    when I embed the SVG file in an HTML file it doesn't work properly
    anymore. I open the HTML in IE5, the SVG is showed, but it doesn't
    respond to events.

    These are the sources I wrote:
    HTML (main.html):
    <HTML>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <BODY>
    <object data="Circle1.svg" width="300" height="300"
    type="image/svg+xml">
    <embed src="Circle1.svg" width="300" height="300"
    type="image/svg+xml" />

    </object>
    </BODY>

    </HTML>
    -----------------------------------------------------------------------

    SVG (Circle1.svg):
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="300" height="300">
    <script xlink:href="Circle1Script.js" type="text/javascript" />

    <circle id="circle" cx="100" cy="50" r="40" stroke="black"
    stroke-width="8" fill="red" onmouseover="ChangeColor(evt)"/>
    </svg>
    -----------------------------------------------------------------------

    JavaScript (Circle1Script.js):
    var svgDoc;
    var svgObjCircle;


    function initsvg(evt){

    var directTarget = evt.getTarget();
    if( directTarget.getNodeType() != 9 ) // if not DOCUMENT_NODE
    {
    svgDoc = directTarget.getOwnerDocument();
    }
    else
    {
    svgDoc = directTarget;
    }
    svgObjCircle = svgDoc.getElementById("circle");
    }

    function ChangeColor(evt) {
    var SVGDoc=evt.getTarget().getOwnerDocument();
    svgObjCircle=SVGDoc.getElementById("circle");

    svgObjCircle.setAttributeNS(null, "stroke", "red");
    }
    -----------------------------------------------------------------------

    Does anyone know how to solve this problem?
     
    Pretty woman, Dec 17, 2003
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Arne Nordmann
    Replies:
    0
    Views:
    552
    Arne Nordmann
    Jun 28, 2004
  2. Jacol

    raise or not to raise [Newbie]

    Jacol, Feb 3, 2007, in forum: Python
    Replies:
    5
    Views:
    432
    Gabriel Genellina
    Feb 5, 2007
  3. ernest
    Replies:
    2
    Views:
    307
    Roy Smith
    Nov 14, 2010
  4. Jack Bates
    Replies:
    0
    Views:
    295
    Jack Bates
    May 2, 2011
  5. bvdp

    Raise X or Raise X()?

    bvdp, Mar 11, 2012, in forum: Python
    Replies:
    10
    Views:
    404
    Stefan Behnel
    Mar 12, 2012
Loading...

Share This Page