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

Question

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

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

Answer 1

将一个<script>元素放在SVG内部(无论是使用内联代码还是通过另一个文件引用xlink:href)都是正确的,当您的脚本适合SVG本身时,可以放置或不放置其他上下文.例如,如果您只有一个脚本化的SVG文档,则这是必要的.

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

• 第一个SVG文件有一些通过JavaScript创建的自定义动画.此SVG文件应直接具有自己的脚本元素.

• 第二个SVG文件只是一个奇特的图像,您想要在单击该图像时提交HTML页面上的表单.为此,脚本应该在您的HTML页面中,因为它与SVG和HTML表单进行对话.这是一个类似的例子,其中HTML中的按钮用于控制SVG.

当您在XHTML5中内嵌SVG内容时,该行变得更加模糊,而不是引用外部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库.