0

我有一个 svg 文件，我正在通过我的 javascript 访问它。像这样

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

我之前是内联 svg，所以我能够访问它的所有元素。但后来它（svg 图像）没有在 safari 上渲染。所以，我采用了这种方式。图像现在完美呈现，但是我不确定如何在 javascript 中访问 svg 文件的元素。你能给点建议吗。

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

<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：我无法在 html 中添加任何内容。一切都必须在 javascript 端完成。

4

1 回答 1

2

我创建了一个示例并将其推送到git repository。我使用了您在这个问题中提供的 SVG 图像。它运行良好，但有一个问题 - 背景图像img/gauge.png没有第二次加载。

所以目前的问题似乎得到了回答，但是来自 SVG 文件的图像的问题仍然是开放的。

解决方法是将gauge.png图像用作元素的背景图像div（它是object元素的容器）并将其从 SVG 中完全删除。

虽然我以后可能会再玩一次。

于 2012-08-18T02:05:28.307 回答