HTMl+SVG+JavaScript：在运行时更改文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6174249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTMl+SVG+JavaScript: change text at runtime?
提问by Udo G
I am about to migrate a few Flash-based applications to HTML+JavaScript+SVG (the single target rendering engine is Webkit).
我即将将一些基于 Flash 的应用程序迁移到 HTML+JavaScript+SVG（单目标渲染引擎是 Webkit）。
I'm completely new to SVG and I'd like to know if I can use a SVG as a template image to fill the screen and change contained text on the fly from the JavaScript code embedded in the HTML page.
我对 SVG 完全陌生，我想知道我是否可以使用 SVG 作为模板图像来填充屏幕并从嵌入在 HTML 页面中的 JavaScript 代码动态更改包含的文本。
What I want to do is: draw the basic structure of the page in Inkscape (with some graphics and text placeholders) and then just display the SVG in the HTML page and fill the text placeholders via JavaScript.
我想要做的是：在 Inkscape 中绘制页面的基本结构（带有一些图形和文本占位符），然后在 HTML 页面中显示 SVG 并通过 JavaScript 填充文本占位符。
I couldget the same resultby displaying a static SVG image in the background and place some absolutely positioned DIVs on top of it to display the text, but I'd like to design the position, size and style of the text labels from within Inkscape.
我可以通过在背景中显示静态 SVG 图像并在其顶部放置一些绝对定位的 DIV 来显示文本来获得相同的结果，但我想在 Inkscape 中设计文本标签的位置、大小和样式.
Can this be done? How?
这能做到吗？如何？
I'm using the Prototype framework, not JQuery.
我使用的是Prototype 框架，而不是 JQuery。
采纳答案by robertc
How you access the SVG depends on exactly how you include it in your page. You can either use and objector embedelement and link to the SVG, or include it inline in the page. Note that including it via an imgelement won't work - the SVG will be treated as an image 'black box', you won't be able to access the internal structure.
您访问 SVG 的方式取决于您将其包含在页面中的方式。您可以使用 andobject或embedelement 并链接到 SVG，也可以将其内联包含在页面中。请注意，通过img元素包含它是行不通的 - SVG 将被视为图像“黑匣子”，您将无法访问内部结构。
Embedding via an object is straightforward and will work in all browsers which support SVG:
通过对象嵌入非常简单，适用于所有支持 SVG 的浏览器：
<object id="svg_object" width="672" height="243" data="myimage.svg" type="image/svg+xml">
No SVG support
</object>
Then to get at the internal structure you need to get the contentDocument:
然后要了解内部结构，您需要获得contentDocument：
var svg = $('svg_object').contentDocument;
var svgel = svg.getElementById('myid');
Note that the internal DOM of the SVG won't be automatically extended by prototype.js in this case, so you'll have to fall back on regular DOM methods.
请注意，在这种情况下，prototype.js 不会自动扩展 SVG 的内部 DOM，因此您必须依靠常规 DOM 方法。
Embedding the SVG directly in the page will work if you serve your page as application/xhtml+xmlor if the browser has an HTML5 compliant parser (Firefox 4, Chrome, IE9 but not Opera or earlier Firefox). However, now your prototype.js methods will work directly with the SVG elements, making certain things much more simple:
如果您将页面作为application/xhtml+xml或浏览器具有 HTML5 兼容解析器（Firefox 4、Chrome、IE9 但不是 Opera 或更早版本的 Firefox）来提供页面，则直接在页面中嵌入 SVG 将起作用。但是，现在您的prototype.js 方法将直接与SVG 元素一起使用，从而使某些事情变得更加简单：
var svgel = $('myid');
I've done a couple of examples: object, inline. They work for me in Firefox 4, you may need to do some messing around to get them working in other browsers (with the caveats mentioned above as far as support is concerned).
我已经做了几个例子：object，inline。它们在 Firefox 4 中对我来说有效，您可能需要做一些混乱才能让它们在其他浏览器中工作（就支持而言，上面提到的警告）。
回答by Christian Kuetbach
Try jQuery. Set manually an ID to an SVG-TextNode, and then try:
试试jQuery。手动将 ID 设置为 SVG-TextNode，然后尝试：
$("#my_id").textContent = "new Value";
May be it works. Otherwise try:
也许它有效。否则尝试：
document.getElementById("my_id").textContent = "new Value";
回答by deadalnix
SVG is a XML based document, that you can manipulate with javascript just like you manipulate XHTML documents.
SVG 是一种基于 XML 的文档，您可以像操作 XHTML 文档一样使用 javascript 进行操作。
getElementById will work with SVG the same way it work with xhtml, so you'll be hable to change text in a SVG dynamically.
getElementById 将像处理 xhtml 一样处理 SVG，因此您可以动态更改 SVG 中的文本。
