Question

我看到<script>标记可以在svg标记（ref）中使用。此外，svg标记中的元素可以通过标记外部的JavaScript访问，因为它们是DOM的一部分。我找不到更多关于哪个更好的细节。通常，我将所有JS代码保存在单独的文件中，并在html中包含引用。我也可以使用针对svg元素的脚本执行相同的操作。另外，我读过我也可以在svg标签内给出一个外部JS文件的链接。

更清楚的是，我说有一个带有嵌入式svg标签的网页（html5）。 svg包含很少的基本形状，我需要鼠标互动。我可以使用jQuery，但不能使用其他外部插件。您是否建议将所有JavaScript（对于svg外部和内部的元素）保存在一个文件中，或者将svg部分保持独立。也可以使用jQuery引用svg标签中的元素吗？如果我这样做会效率低下吗？

Answer 1

当您的脚本适合SVG本身时，在SVG中放置<script>元素（无论是使用内联代码还是通过xlink:href在另一个文件中引用）都是正确的，无论是否有其他上下文放在里面。这是必要的，例如，如果您只有a scripted SVG document。

例如，假设您有一个HTML页面，并且包含两个SVG文件。

第一个SVG文件包含一些通过JavaScript创建的自定义动画。这个SVG文件应该直接有自己的脚本元素。
第二个SVG文件只是一个奇特的图像，当您单击该图像时，您希望在提交HTML页面上的表单时这样做。为此，脚本应该在您的HTML页面中，因为它与SVG和HTML表单进行对话。这是一个similar example，其中HTML中的按钮用于控制SVG。

当您inlining your SVG content in something XHTML5时，该行变得更模糊，而不是引用外部SVG文件。这个SVG内容是它自己的野兽，还是它作为特定文本段落的HTML页面的一部分？

我个人倾向于将我的SVG内联到HTML中，从而将我的所有脚本保留在SVG之外。但是，两者都可以。

Answer 2

您可以使用 xlink：href 属性调用外部文件。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
     <script type="text/ecmascript" xlink:href="script.es"/>
</svg>

（来源：W3C）

另外，我建议你RaphaelJS，一个允许跨浏览器矢量绘图的JavaScript库。

SVG <script>元素：内部还是外部？</script>

2 个答案: