Question

我正在尝试创建动态SVG图形，我的理解是创建动态SVG的唯一方法是使用脚本语言，所以我有几个问题，基本上我想加载或嵌入SVG到HTML网页并使用网页中的输入控制图形，而不是在SVG文件中硬编码ECMAscript。我不完全确定我是否应该使用embed标签或iframe来显示SVG这里是我对SVG和脚本的怀疑：

使用<iframe>或<embed>标签访问SVG元素的差异（就脚本而言），也许有人可以包含简单的示例。
SVG可以评估元素属性中的数学表达式（只是为了确定）？

Answer 1

请勿使用<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

Answer 2

使用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中进行了测试。

AHA！ <object>具有与<iframe>类似的安全行为：域，协议必须与站点和SVG文件相同。

<强> EDIT2

如果您有兴趣如何让标记矢量图形在没有插件的情况下在Internet Explorer中工作，那么Vector Markup Language就是这样。

Answer 3

嗯，这取决于你对动态的意思。在大多数情况下，是的，您可能需要脚本。如果将脚本放在HTML或SVG文件中没有区别，两者都将由同一个引擎执行。

您可以使用declarative animation elements（又名SMIL）创建交互式/动画svg内容。您还可以使用CSS执行简单的悬停效果：悬停规则或使用CSS3 Transitions的过渡。

XSLT还可用于制作一些动态的svg内容，因为它可以将您的输入转换为其他内容。但它并未涉及交互方面。

您可以使用以下任意一种方式从包含它的HTML文件中访问svg元素：

theEmbeddingElement.contentDocument（首选，但不适用于<embed>）或者theEmbeddingElement.getSVGDocument()。

使用<iframe>和<embed>显示SVG和脚本</iframe>的差异

3 个答案: