HTMl + SVG + JavaScript:在运行时更改文本？

Question

我即将将一些基于Flash的应用程序迁移到HTML + JavaScript + SVG(单个目标渲染引擎是Webkit).

我是SVG的新手,我想知道我是否可以使用SVG作为模板图像来填充屏幕,并从嵌入在HTML页面中的JavaScript代码中动态更改包含的文本.

我想要做的是:在Inkscape中绘制页面的基本结构(带有一些图形和文本占位符),然后在HTML页面中显示SVG并通过JavaScript填充文本占位符.

我能得到同样的结果通过显示在背景中的静态SVG图像并将其放置在它上面的一些绝对定位的DIV来显示文本,但我想从内Inkscape的设计文本标签的位置,大小和样式.

可以这样做吗？怎么样？

我正在使用Prototype框架,而不是JQuery.

Answer 1

试试jQuery.手动将ID设置为SVG-TextNode,然后尝试:

$("#my_id").textContent = "new Value";

可能是有效的.否则尝试:

document.getElementById("my_id").textContent = "new Value";

Answer 2

您访问 SVG 的方式具体取决于您将其包含在页面中的方式。您可以使用 and objectorembed元素并链接到 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 中为我工作，您可能需要做一些修改才能让它们在其他浏览器中工作（就支持而言，有上面提到的警告）。