访问嵌入式文件的元素 [英] Accessing elements of embedded file

问题描述

我有一个svg文件，可以通过javascript访问.像这样

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"); 

我以前是内联svg的，所以我能够访问它的所有元素.但是后来(svg图像)没有在野生动物园上呈现.因此，我采用这种方式.该图像现在可以完美呈现，但是我不确定如何在javascript中访问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.

在此处粘贴我的svg文件代码:

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>

我需要访问元素"needle".

I need to access the element "needle".

PS:我无法在html中添加任何内容.一切都必须在JavaScript方面完成.

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

推荐答案

我创建了一个示例并将其推送到 git存储库 . 我使用了您在 这个问题 中提供的SVG图片. 它工作正常，但是有一个问题-img/gauge.png的背景图像没有第二次加载.

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.

因此，当前的问题似乎已得到解答，但是来自SVG文件的该图像的问题仍未解决.

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

解决方法是将gauge.png图像用作div元素(这是object元素的容器)的背景图像，并将其从SVG中完全删除.

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.

这篇关于访问嵌入式文件的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！