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 的方式取决于您在页面中包含它的方式。您可以使用和objectembed元素并链接到 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');

我做了几个例子:objectinline。它们在 Firefox 4 中为我工作,你可能需要做一些事情才能让它们在其他浏览器中工作(就支持而言,上面提到的警告)。

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

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

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

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