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

HTMl+SVG+JavaScript: change text at runtime?

本文关键字：文本 运行时 HTMl+SVG+JavaScript      更新时间：2023-09-26

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

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

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

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

这能做到吗？怎样

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

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

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

也许它有效。否则，请尝试：

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

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

我已经做了几个例子：对象，内联。它们在Firefox4中对我有效，你可能需要做一些麻烦来让它们在其他浏览器中工作（就支持而言，需要注意上述事项）。

SVG是一个基于XML的文档，您可以像处理XHTML文档一样使用javascript来处理它。

getElementById将像处理xhtml一样处理SVG，因此您可以动态更改SVG中的文本。

相关文章：