Embedding SVG in javascript code

Question

I have this HTML code, which is invoking my javascript code. The code is for a gauge. In the javascript code, I am trying to access a SVG file, and modifying the needle (of the gauge) to display the desired value. The code is working fine. However, I do not wish to call onload(); and "object id" in HTML. I just want that as soon as my HTML file loads, javascript is invoked automatically. I do not want to call anything in html (no object id, no onload function) except headline in body tags. I tried various onload() methods, also tried this link http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317 But not able to implement it. Any help would be highly appreciated.

PS : I tried my best to be as thorough in explaining the problem. However, please let me know if I am unclear somewhere.

This is Gauge.png image which is embedded in the svg code I have pasted below https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>
</svg>

HTML+ Javascript Code

<head>
<title>SVG Gauge example</title>

<script>
function update1(){
    var scale=100;
    var value;
    var value1 = 69;

    var el=document.getElementById('gauge1');       
    if (!el) return;

    /* Get SVG document from HTML element */
    var svg_doc = el.contentDocument;
    if (!svg_doc) return;


    /* Rotate needle to display given value */
    var needle_el = svg_doc.getElementById('needle');
    if (!needle_el) return;
    /* Calc rotation angle (0->0%, 260->100%) */
    value = parseInt(value1);
    scale = parseInt(scale);
    if (value > scale) value = scale;
    var angle = value / scale * 260;
    /* On-the-fly SVG transform */
    needle_el.setAttribute('transform','rotate('+angle+',62,62)');
}
</script>

</head>
<body onload="update1(); ">
<div>
<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>
</div>
</body>    

</html>

What's the error? What's the actual/expected behavior? It's hard to tell what you're asking. — Ruan Mendes
– Ruan Mendes, Commented Jul 30, 2012 at 20:54
There is no error. If you see the output on your screen,you will see the expected behavior that the needle is moving as we change the value. I just want to avoid calling onload, and object id in html, want to shift everything to javascript. — SandBag_1996
– SandBag_1996, Commented Jul 30, 2012 at 20:56
I'm not sure about what you mean with object id. Do you want to access any gauge, not just gauge1? Well, this id is specified in the javascript code, not in the html document, so you could pass the gauge's id as a parameter to update. — Yogu
– Yogu, Commented Jul 30, 2012 at 20:59
I want to access image "Gauge.svg" , but I am not able to shift it to javascript, because then the var svg_doc is not able to retrieve it. Can you shed some more light on the solution you just mentioned? — SandBag_1996
– SandBag_1996, Commented Jul 30, 2012 at 21:03
So you want to set the path to the svg file in javascript? Then simply write el.setAttribute('data', 'file.svg'). — Yogu
– Yogu, Commented Jul 30, 2012 at 21:08

Yogu · Accepted Answer · 2012-07-30 20:53:56Z

1

To avoid the onload attribute, you can use the load event:

<script type="text/javascript">
    function update1() {
        // ...
    }

    document.addEventListener('load', update1, true);
</script>

answered Jul 30, 2012 at 20:53

Yogu

9,5855 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ruan Mendes Over a year ago

This is just a different way to set an onload handler. Is that what the OP is asking?

Yogu Over a year ago

As far as I understood The code is working fine. However, I do not wish to call onload()

SandBag_1996 Over a year ago

@yogu : works fine. :) Thanks a ton..(Wish I had the necessary reputation to vote up your answer).. Is there any way to remove object id too..

Ruan Mendes Over a year ago

@Yogu addEventListener is not cross browser friendly. window.onload is the simplest way if you don't have other onload handlers

Yogu Over a year ago

@Juan Mendes: That's true, e.g. IE8 does not support it. An alternative solution would be to include jQuery and then use $(update1);.

|

Collectives™ on Stack Overflow

Embedding SVG in javascript code

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related