Rendering through javascript

Question

I have been trying to render a svg image through javascript. Tried various options, but ultimately have to resolve to this one.

I have declared an object id in html like this

<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>

Now, I have been trying to access this gauge.svg through javascript. I have created an element of embed type like this

this.m_svg = document.createElement('embed');

aand then trying to use setAttribute to access the image, but no success. Any suggestions?

Also pasting the svg code here with the image.

image: https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg svg code:

<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>

PS : Already tried this.m_svg.innerHTML = svg code (Doesnt work on safari)

possible duplicate of [How to access the content of the "embed" tag in HTML](http://stackoverflow.com/questions/8496241/how-to-access-the-content-of-the-embed-tag-in-html) — Erik Dahlström, Aug 21 '12 at 08:08
another possible duplicate: http://stackoverflow.com/questions/11434916/javascript-accessing-inner-dom-of-svg — Erik Dahlström, Aug 21 '12 at 08:12
It is not a duplicate of that question. In that question, the image was loaded, and how to access the contents of the image was the question. — SandBag_1996, Aug 21 '12 at 12:12
The first link again mention the second link. so thats not a duplicate either. — SandBag_1996, Aug 21 '12 at 12:14
Not sure what you're after then, the answers to the other questions do cover accessing the svg content from — Erik Dahlström, Aug 21 '12 at 13:50
I beg to differ on that. If you see it carefully, those questions have given the way to access elements of svg file, I, however, wants to set the image on the background using only javascript (with no reference to the svg file on html end).. — SandBag_1996, Aug 21 '12 at 13:57
You have no reference to the svg? But the question says that you have it referenced with an — Erik Dahlström, Aug 27 '12 at 17:45

score 2 · Accepted Answer · answered Aug 20 '12 at 15:24

2

This shows you how to access the elements that are the contents of an <object> tag.

answered Aug 20 '12 at 15:24

Robert Longson

118,664
26
252
242

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Make sure that your headers are set correctly, I know that webkit can get a little selective with it's SVG implementation unless headers are set to:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

for more info check here: https://stackoverflow.com/a/6410814/873836

edited May 23 '17 at 12:20

Community

1
1

answered Aug 20 '12 at 15:21

Alex

3,732
5
37
59

ah, ok. Ive always had issues with SVG and generally just use Raphael these days to make it easier – Alex Aug 20 '12 at 15:42

Rendering through javascript

2 Answers2