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

问题描述

| 我即将将一些基于Flash的应用程序迁移到HTML + JavaScript + SVG（单个目标呈现引擎是Webkit）。 我是SVG的新手，我想知道是否可以将SVG用作模板图像来填充屏幕，并通过嵌入HTML页面的JavaScript代码即时更改包含的文本。 我想做的是：在Inkscape中绘制页面的基本结构（带有一些图形和文本占位符），然后在HTML页面中显示SVG，然后通过JavaScript填充文本占位符。 通过在背景中显示静态SVG图像并在其顶部放置一些绝对定位的DIV来显示文本，我可以得到相同的结果，但是我想从内部设计文本标签的位置，大小和样式墨迹 能做到吗？怎么样？ 我使用的是Prototype框架，而不是JQuery。     

解决方法

        您如何访问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方法。 如果您将页面设置为“ 6”或浏览器具有兼容HTML5的解析器（Firefox 4，Chrome，IE9，但没有Opera或更早的Firefox），则可以直接在页面中嵌入SVG。但是，现在您的prototype.js方法将直接与SVG元素一起使用，从而使某些事情变得更加简单：

var svgel = $(\'myid\');

我已经做了几个例子：对象，内联。它们在Firefox 4中为我工作，您可能需要做一些麻烦才能使它们在其他浏览器中工作（就支持而言，上述注意事项）。     ,        试试jQuery。手动将一个ID设置为SVG-TextNode，然后尝试：

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

可能是可行的。否则请尝试：

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

    ,        SVG是基于XML的文档，您可以像处理XHTML文档一样使用javascript进行处理。 getElementById将与SVG一起使用，就像与xhtml一样，因此您将能够动态更改SVG中的文本。