直接从Javascript代码访问SVG文件

本文介绍了直接从Javascript代码访问SVG文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有这个HTML代码，它正在调用我的javascript代码。代码适用于仪表。在javascript代码中，我试图访问SVG文件，并修改针（指标）以显示所需的值。代码工作正常。但是，我不希望在HTML中调用object id。我想直接通过javascript访问SVG文件，而不是在HTML中使用对象ID。我尝试使用el.setAttribute（'data'，'gauge.svg'）;但是后来svg_doc无法检索SVG图像并修改针。任何帮助都将受到高度赞赏。

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 "object id" in HTML. I want to access SVG file through javascript directly, instead of using object id in HTML. I tried using el.setAttribute('data', 'gauge.svg'); But then svg_doc isn't able to retrieve the SVG image and modify the needle. Any help would be highly appreciated.

PS：我尽力解释问题。但是，如果我在某处不清楚，请告诉我。

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

这是Gauge.png图片，它嵌入在我粘贴在下面的svg代码中 sphotos-b.xx.fbcdn/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

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

HTML + Javascript代码

<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)'); } document.addEventListener('load', update1, true); </script> </head> <div> <object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/> </div> </html>

推荐答案

正如robertc已经提到的，你可以嵌入javascript代码进入你的SVG文件：

As robertc already mentioned, you can embed the javascript code into your SVG file:

我把代码放在实际的SVG内容下面，以便在脚本中加载文档执行。

I've put the code below the actual SVG contents so that the document is already loaded when the script is executed.

然后，您可以直接查看SVG文件，例如在Firefox中（我现在已经测试过了。）

Then, you can view the SVG file directly e.g. in Firefox (I've tested it right now).

更多推荐

直接从Javascript代码访问SVG文件