我正在尝试创建动态 SVG 图形，据我了解，创建动态 SVG 的唯一方法是使用脚本语言，所以我有几个问题，基本上我想加载或嵌入 SVG到 HTML 网页并使用网页中的输入来控制图形，而不是在 SVG 文件中硬编码 ECMAscript。我不完全确定是否应该使用嵌入标签或 iframe 来显示 SVG 这里是我对 SVG 和脚本的怀疑：
<iframe> 或<embed> 标签访问SVG 元素有什么区别（在脚本方面）？也许有人可以提供简单的示例。
【问题讨论】：
标签： javascript html iframe svg
不要使用<iframe> 或<embed>。而是直接将 SVG 嵌入到 XHTML 中，如下所示：
http://phrogz.net/svg/svg_in_xhtml5.xhtml
这样，您就可以完全访问作为文档一部分的 SVG DOM。如该示例所示，您只需要确定使用 SVG 命名空间创建 SVG 元素（但不是属性）。您还必须确保您的网络主机将 xhtml 的内容类型发送为 application/xhtml+xml 或 text/xml，而不是 text/html。
phrogz$ curl --silent -I http://phrogz.net/svg/svg_in_xhtml5.xhtml | grep "Type"
Content-Type: application/xhtml+xml
有关 JavaScript 操作 SVG 与 HTML 混合的更多示例，请参阅that same directory 中的各种 .xhtml 文件。一个特别引人注目的例子是this one，它动态创建数百个小型 SVG 文件，作为像文本一样流动的内联元素。
关于你的问题：
SVG 能否评估元素属性中的数学表达式（只是为了确定）？
一般来说，不。但是，SMIL Animation 的使用确实允许您指定随时间变化的各种属性插值方法。
最后，请注意，您不必将 SVG 放入 HTML 以使其动态化。您可以直接使用 JavaScript 编写 SVG 脚本。例如看这个测试文件（按下绿色按钮开始模拟）：
http://phrogz.net/svg/SpringzTest.svg
【讨论】：
<![CDATA[]]> 标签？放置操作 SVG 的脚本时
&lt; 字符开始一个标记。以下标记中的小于号是无效的 XML：<script ...> for (var i=0;i<10;++i){ ... }</script>。您必须记住在脚本中键入 &lt; 和 &gt; 和 &amp;，只要您想要那个字符，或者您可以将它们全部包装在 CDATA 块中（并确保您没有三个字符 @987654340 @ 在你的脚本中的任何地方）。
使用 or 和标签访问 SVG 元素有什么区别（在脚本方面）？也许有人可以提供简单的示例。
<iframe>:
试图访问框架内容的脚本受同源策略的约束，如果从不同域加载，则无法访问其他窗口对象中的大部分属性。这也适用于试图访问其父窗口的框架内的脚本。仍然可以通过window.postMessage实现跨域通信。
来源：https://developer.mozilla.org/en/HTML/Element/iframe#Scripting
我们通过iframe_element.contentWindow方法访问iframe内容：
<html>
<body>
<iframe id="SVG_frame" src="image.svg"></iframe>
</body>
<script>
var SVG_frame = document.getElementById ( "SVG_frame" );
var SVG_content = null;
function getContent ()
{
SVG_content = SVG_frame.contentWindow;
SVG_content ? alert ( "YAY!" ) : alert ( "BOO!" );
}
SVG_frame.onload = getContent;
</script>
</html>
<embed>:
示例（查看源代码）：https://jwatt.org/svg/demos/scripting-across-embed.html
（至少在 Chromium 中这两种方法都失败了）
<object>
示例（查看源代码）：https://jwatt.org/svg/demos/scripting-across-object.html
SVG 能否计算数学表达式 元素属性（只是为了确定）？
喜欢<element attribute="48/2*(9+3)"/>？
我在SVG spec 中没有找到关于它的消息。
编辑
我个人建议使用<object> + Data URI Scheme 和/或object_element.contentDocument。我已经在 Chromium 和 Firefox 中进行了测试。
啊哈！ <object> 与<iframe> 具有相似的安全行为：域、协议对于站点和 SVG 文件必须相同。
EDIT2
如果您对如何让标记矢量图形在没有插件的情况下在 Internet Explorer 中工作感兴趣，那么Vector Markup Language 就是最好的选择。
【讨论】：
嗯，这取决于您对动态的含义。在大多数情况下是的，您可能需要脚本。将脚本放在 HTML 或 SVG 文件中没有区别，两者都将由同一个引擎执行。
您可以使用declarative animation elements（又名 SMIL）创建交互式/动画 svg 内容。你也可以用 CSS :hover 规则做简单的悬停效果，或者用CSS3 Transitions 做过渡。
XSLT 也可用于制作一些动态的 svg 内容，因为它可以将您的输入转换为其他内容。但它并未涵盖交互方面。
您可以从包含它的 HTML 文件中访问 svg 元素：
theEmbeddingElement.contentDocument（首选，但不适用于<embed>）
或者theEmbeddingElement.getSVGDocument()。
【讨论】：