0

I have a svg file which I am accessing through my javascript. Like this

 this.m_svg = new Element('embed');
this.m_svg.setAttribute("src","img/gauge.svg");

I was in-lining svg before, so I was able to access all the elements of it. But then it (svg image) didnt render on safari. So, I employed this way. The image is now perfectly rendered, however I am not sure how to access elements of the svg file in the javascript. Can you give any suggestions.

Pasting my svg file code here:

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

I need to access the element "needle".

PS: I cant add anything in html. Everything has to be done on javascript side.

SandBag_1996
  • 1,570
  • 3
  • 20
  • 50

1 Answers1

2

I've created an example and pushed it to git repository. I've used the SVG image which you've provided in this question. It's working well, but there is one problem - the background image from img/gauge.png is not loading second time.

So current question seems answered, but the question with that image from SVG file is still open.

The work-around is to use the gauge.png image as a background-image of div element (which is a container for object element) and remove it from SVG at all.

Though I'll maybe play with it again later.

Community
  • 1
  • 1
Eugene Naydenov
  • 7,165
  • 2
  • 25
  • 43
  • Neat solution, but my application is not ready to be ported to jquery right now :( and I am not able to perceive how to transform your code to javascript.. like find function that you used..only that is mystery, rest I think can be converted – SandBag_1996 Aug 18 '12 at 02:15
  • I've used jQuery just to save the time. You can re-write it and use `XMLHttpRequest`, `document.getElementById()`, etc. Also if you'll decide to place gauge.png as background for div and remove it from .svg file, you can initiate object on svg load via AJAX instead of set the attribute, this will save one request to your server. – Eugene Naydenov Aug 18 '12 at 02:21
  • Unfortunately I cant employ that elegant solution of using gauge.png as background. The sole purpose of accessing svg from javascript was to avoid any role of html, else I could have made an object in html, and could have retrieved the id in js. Is there any way, I can access the elements without any role of html. I am sure there should be a way. If we can access the file through js, then why not access its elements too.. right? – SandBag_1996 Aug 18 '12 at 02:26
  • Dude, thanks a millionth ton.. will try this first thing tomorrow on my original system (at home now).. :D Really appreciate your help.. really :D – SandBag_1996 Aug 18 '12 at 02:45