SVG< script>元素:内部还是外部? [英] SVG <script> element: inside or outside?

问题描述

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

I see <script> tag can be used within svg tag (ref). Also, the elements within svg tag is accessible through JavaScript outside the tag as they are part of DOM. I could not find much details on which is better. Normally, I keep all the JS code in separate file and include the reference in html. Can I do the same with script targeted to svg elements as well. Also, I read I can also give a link to an external JS file inside the svg tag.

更清楚地说，假设我有一个嵌入了svg标签的网页(html5). svg包含一些基本形状，需要鼠标交互.我可能会使用jQuery，但不会使用其他外部插件.您是否建议将所有JavaScript(针对svg内外的元素)都保存在一个文件中，或者将svg部分分开.还可以使用jQuery引用svg标记内的元素吗?如果我这样做效率低下?

To be more clear, Say I have a webpage (html5) with embedded svg tag in it. the svg contained few basic shapes, which I need mouse interaction. I may use jQuery, but not other external plugin. Would u recommend keeping all the JavaScript (for elements outside and inside svg) in one single file, or keep the svg part separate. Also is it ok to refer to the elements within the svg tag using jQuery? Any inefficiency if I do it?

推荐答案

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

Placing a <script> element inside SVG (whether you use code inline or referenced in another file via xlink:href) is correct when your script is appropriate for the SVG itself, with or without another context it may be placed within. This is necessary, for example, if you have just a scripted SVG document.

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

For example, let's say you have an HTML page and you include two SVG files.

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

• The first SVG file has some custom animation created through JavaScript. This SVG file should have its own script element directly.

第二个SVG文件只是一个精美的图像，您想要创建它，因此当您单击该图像时，将提交HTML页面上的表单.为此，该脚本应位于您的HTML页面中，因为它可以与SVG和HTML表单进行对话.这是一个类似示例，其中HTML中的按钮用于控制SVG.

The second SVG file is just a fancy image, and you want to make it so when you click on that image a form on your HTML page is submitted. For this, the script should be in your HTML page, since it talks to both the SVG and your HTML form. Here's a similar example, where buttons in the HTML are used to control the SVG.

当您将SVG内容内嵌到XHTML5 中而不是引用外部SVG文件时，该行变得越来越模糊. SVG内容是它自己的野兽，还是它在HTML页面中与特定文本段落一样多?

The line becomes fuzzier when you are inlining your SVG content in something XHTML5, instead of referencing an external SVG file. Is that SVG content its own beast, or is it just as much a part of the HTML page as a particular paragraph of text?

我个人倾向于将SVG内联到HTML中，因此将所有脚本保留在SVG之外.无论哪种都可以.

I personally tend to inline my SVG into the HTML and thus keep all my script outside the SVG. Either will work, though.

这篇关于SVG< script>元素:内部还是外部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！