我看到 <script>
标签可以在 svg 标签 ( ref ) 中使用。此外,svg 标签内的元素可以通过标签外的 JavaScript 访问,因为它们是 DOM 的一部分。我找不到关于哪个更好的详细信息。通常,我将所有 JS 代码保存在单独的文件中,并在 html 中包含引用。我也可以对针对 svg 元素的脚本做同样的事情吗?另外,我读到我还可以在 svg 标签内提供指向外部 JS 文件的链接。
更清楚地说,假设我有一个网页 (html5),其中嵌入了 svg 标签。 svg 包含几个基本形状,我需要鼠标交互。我可能会使用 jQuery,但不会使用其他外部插件。您会建议将所有 JavaScript(用于 svg 外部和内部的元素)保存在一个文件中,还是将 svg 部分分开。也可以使用 jQuery 引用 svg 标签中的元素吗?这样做效率低下吗?
最佳答案
放置一个 <script>
当您的脚本适用于 SVG 本身时,SVG 中的元素(无论您使用内联代码还是通过 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 之外。不过,两者都行。
关于javascript - SVG <脚本> 元素 : inside or outside?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5862561/