5

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

我对 SVG 完全陌生，我想知道是否可以使用 SVG 作为模板图像来填充屏幕并从嵌入在 HTML 页面中的 JavaScript 代码动态更改包含的文本。

我想做的是：在 Inkscape 中绘制页面的基本结构（带有一些图形和文本占位符），然后在 HTML 页面中显示 SVG 并通过 JavaScript 填充文本占位符。

我可以通过在背景中显示静态 SVG 图像并在其顶部放置一些绝对定位的 DIV 来显示文本来获得相同的结果，但我想在 Inkscape 中设计文本标签的位置、大小和样式.

这可以做到吗？如何？

我使用的是原型框架，而不是 JQuery。

4

3 回答 3

6

试试 jQuery。手动将 ID 设置为 SVG-TextNode，然后尝试：

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

可能会奏效。否则尝试：

document.getElementById("my_id").textContent = "new Value";
于 2011-05-30T09:13:05.007 回答
3

您访问 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 中为我工作，你可能需要做一些事情才能让它们在其他浏览器中工作（就支持而言，上面提到的警告）。

于 2011-05-30T15:49:28.963 回答
0

SVG 是基于 XML 的文档，您可以像操作 XHTML 文档一样使用 javascript 操作它。

getElementById 将与 SVG 一起使用它与 xhtml 相同的方式，因此您将能够动态更改 SVG 中的文本。

于 2011-05-30T09:13:55.960 回答