我即将将一些基于 Flash 的应用程序迁移到 HTML+JavaScript+SVG（单一目标渲染引擎是 Webkit）。
我是 SVG 的新手，我想知道是否可以使用 SVG 作为模板图像来填充屏幕并从嵌入在 HTML 页面中的 JavaScript 代码动态更改包含的文本。
我要做的是：在 Inkscape 中绘制页面的基本结构（带有一些图形和文本占位符），然后在 HTML 页面中显示 SVG 并通过 JavaScript 填充文本占位符。
我可以通过在背景中显示静态 SVG 图像并在其顶部放置一些绝对定位的 DIV 以显示文本来获得相同的结果，但是我'希望在 Inkscape 中设计文本标签的位置、大小和样式。
这可以吗？怎么样？
我使用的是Prototype framework，而不是 JQuery。
【问题讨论】：
标签： javascript svg prototypejs inkscape
试试 jQuery。手动设置一个 SVG-TextNode 的 ID，然后尝试：
$("#my_id").textContent = "new Value";
可能有效。否则尝试：
document.getElementById("my_id").textContent = "new Value";
【讨论】：
elm.textContent = "new Value"。
您访问 SVG 的方式取决于您在页面中包含它的方式。您可以使用和 object 或 embed 元素并链接到 SVG，或者将其包含在页面中。请注意，通过 img 元素包含它是行不通的 - SVG 将被视为图像“黑匣子”，您将无法访问内部结构。
通过对象嵌入很简单，适用于所有支持 SVG 的浏览器：
<object id="svg_object" width="672" height="243" data="myimage.svg" type="image/svg+xml">
No SVG support
</object>
然后要获得内部结构，您需要获得contentDocument：
var svg = $('svg_object').contentDocument;
var svgel = svg.getElementById('myid');
请注意，在这种情况下，prototype.js 不会自动扩展 SVG 的内部 DOM，因此您必须使用常规 DOM 方法。
如果您将页面提供为application/xhtml+xml 或浏览器具有符合 HTML5 的解析器（Firefox 4、Chrome、IE9 但不是 Opera 或更早版本的 Firefox），则直接在页面中嵌入 SVG 将起作用。但是，现在您的 prototype.js 方法将直接与 SVG 元素一起使用，从而使某些事情变得更加简单：
var svgel = $('myid');
我做了几个例子：object、inline。它们在 Firefox 4 中为我工作，你可能需要做一些事情才能让它们在其他浏览器中工作（就支持而言，上面提到的警告）。
【讨论】：
object 示例链接到本地文件；）
SVG 是基于 XML 的文档，您可以像操作 XHTML 文档一样使用 javascript 操作它。
getElementById 可以像使用 xhtml 一样使用 SVG，因此您可以动态更改 SVG 中的文本。
【讨论】：
<img> 和 <embed> 嵌入 SVG，但这些都不允许我进入 SVG 文档的 XML 树（即没有 html_svg_dom_element.getElementById() 和 ...getElementsByTagName() 返回一个空列表。