javascript - SVG <脚本> 元素 : inside or outside?

标签 javascript jquery svg

我看到 <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/

相关文章:

javascript - 调整到浏览器大小的 2 部分 CSS "wallpaper"

javascript - 如何使用 JavaScript 检测元素重叠(重叠)?

javascript - 是否可以使用 HTML 的 .querySelector() 通过 SVG 中的 xlink 属性进行选择?

html - SVG 渐变 URL 与 <base href> 不兼容

javascript - iPhone Web 应用程序 - 禁用正文滚动但允许正文中的所有元素

javascript - 需要解释代码输出

javascript - 当特定文本显示在另一个 div 中时,jQuery 替换 div 中的文本(动态更新的 Shopify 定价变体)

css - 动画 tspan x & y

javascript - 使用子字符串更改数组元素值

javascript - ng-if 更改后重新加载 Jquery