Given this:

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  ".1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
 xmlns=""
>
<text 
 x="20" 
 y="20" 
 onload="alert('load'); setAttribute('fill', 'fuchsia')"
 onclick="setAttribute('fill', 'lightgreen')"
 onmouseout="setAttribute('fill', 'black')"
>Load me</text>
</svg>

I would expect to see pink text when the svg was opened. onclick and onmouseout work as expected.

This doesn't happen in firefox. IE can't open it, period.

Any explanations?

Given this:

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
 xmlns="http://www.w3/2000/svg"
>
<text 
 x="20" 
 y="20" 
 onload="alert('load'); setAttribute('fill', 'fuchsia')"
 onclick="setAttribute('fill', 'lightgreen')"
 onmouseout="setAttribute('fill', 'black')"
>Load me</text>
</svg>

I would expect to see pink text when the svg was opened. onclick and onmouseout work as expected.

This doesn't happen in firefox. IE can't open it, period.

Any explanations?

• javascript
• svg

• 1 For performance reasons Firefox only sends onload events to <svg> elements. – Robert Longson Commented May 29, 2014 at 13:47

2 Answers 2

Use onload event on <svg> element. This works fine on all browsers.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<svg onload="init(evt)" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" xmlns:gui="http://www.kevlindev./gui">
    <script>var info,infoElem;

    function init(e) {
        if ( window.svgDocument == null )
            svgDocument = e.target.ownerDocument;

        infoElem = svgDocument.getElementById("info");
        infoElem.setAttributeNS(null,"fill", "fuchsia");
    }

    function changeColor(c){
        infoElem.setAttributeNS(null,"fill", c);
    }</script>
    <text id="info" x="20"  y="20" onclick="changeColor('lightgreen')" onmouseout="changeColor('black')">Load me</text>
</svg>

This worked for me

//snip...

    <svg width="100px" height="100px" version="1.1" onload="alert('load'); setAttribute('fill', 'fuchsia')"
     xmlns="http://www.w3/2000/svg"
    >

//snip...