Question

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

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

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

我可以通过在后台显示静态SVG图像来获得相同的结果，并在其上放置一些绝对定位的DIV来显示文本，但是我d喜欢从Inkscape中设计文本标签的位置，大小和样式。

可以这样做吗？怎么样？

我正在使用Prototype framework，而不是JQuery。

Answer 1

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

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

可能有效。否则试试：

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

Answer 2

您访问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');

请注意，在这种情况下，SVG的内部DOM不会被prototype.js自动扩展，因此您将不得不依赖于常规DOM方法。

如果您将页面作为application/xhtml+xml提供服务，或者浏览器具有符合HTML5标准的解析器（Firefox 4，Chrome，IE9但不包含Opera或更早版本的Firefox），则可以直接在页面中嵌入SVG。但是，现在你的prototype.js方法将直接使用SVG元素，使某些事情变得更加简单：

var svgel = $('myid');

我做了几个例子：object，inline。他们在Firefox 4中为我工作，你可能需要做一些搞乱让他们在其他浏览器中工作（就支持而言，上面提到的警告）。

Answer 3

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

getElementById与SVG的工作方式与xhtml相同，因此您可以动态更改SVG中的文本。

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

3 个答案: