javascript SVG <script> 元素：内部还是外部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5862561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG <script> element: inside or outside?
提问by bsr
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.
我看到<script>标签可以在 svg 标签（ref）中使用。此外，svg 标签内的元素可以通过标签外的 JavaScript 访问，因为它们是 DOM 的一部分。我找不到关于哪个更好的详细信息。通常，我将所有 JS 代码保存在单独的文件中，并将引用包含在 html 中。我也可以对针对 svg 元素的脚本执行相同的操作。另外，我读到我还可以在 svg 标签内提供指向外部 JS 文件的链接。
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?
更清楚地说，假设我有一个网页（html5），其中嵌入了 svg 标签。svg 包含几个基本形状，我需要鼠标交互。我可以使用 jQuery，但不能使用其他外部插件。您是否建议将所有 JavaScript（对于 svg 外部和内部的元素）保存在一个文件中，或者将 svg 部分分开。也可以使用 jQuery 引用 svg 标签中的元素吗？如果我这样做，效率低下吗？
采纳答案by Phrogz
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.
当您的脚本适用于 SVG 本身时，将<script>元素放置在 SVG 中（无论您使用内联代码还是通过 引用在另一个文件中xlink:href）都是正确的，无论是否可以放置其他上下文。例如，如果您只有一个脚本化的 SVG 文档，则这是必要的。
For example, let's say you have an HTML page and you include two SVG files.
例如，假设您有一个 HTML 页面并且包含两个 SVG 文件。
The first SVG file has some custom animation created through JavaScript. This SVG file should have its own script element directly.
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 文件有一些通过 JavaScript 创建的自定义动画。这个 SVG 文件应该直接有自己的脚本元素。
第二个 SVG 文件只是一个精美的图像，您希望在单击该图像时提交 HTML 页面上的表单。为此，脚本应该在您的 HTML 页面中，因为它会与 SVG 和您的 HTML 表单对话。这是一个类似的示例，其中 HTML 中的按钮用于控制 SVG。
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?
当您在 XHTML5中内联 SVG 内容而不是引用外部 SVG 文件时，该行变得更加模糊。SVG 内容是它自己的野兽，还是与特定文本段落一样是 HTML 页面的一部分？
I personally tend to inline my SVG into the HTML and thus keep all my script outside the SVG. Either will work, though.
我个人倾向于将我的 SVG 内联到 HTML 中，从而将我的所有脚本保留在 SVG 之外。不过，两者都可以。
回答by Mathieu Rodic
You can call an external file using the xlink:hrefattribute.
您可以使用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>
(source: W3C)
（来源：W3C）
Also, I recommend you RaphaelJS, a JavaScript library allowing cross-browser vector drawing.
另外，我向您推荐RaphaelJS，这是一个允许跨浏览器矢量绘图的 JavaScript 库。
