SVG<脚本>元素：内部还是外部？
我看到
更清楚地说，假设我有一个网页（html5），其中嵌入了 svg 标签。 svg 包含一些基本形状，我需要鼠标交互。我可以使用 jQuery，但不能使用其他外部插件。您是否建议将所有 JavaScript（对于 svg 外部和内部的元素）保留在一个文件中，或者将 svg 部分分开。另外，是否可以使用 jQuery 引用 svg 标签中的元素？如果我这样做的话效率会低吗？
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.
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当您的脚本适合 SVG 本身时，在 SVG 中放置
例如，假设您有一个 HTML 页面，并且包含两个 SVG 文件。
第一个 SVG 文件包含一些通过 JavaScript 创建的自定义动画。这个 SVG 文件应该直接有自己的脚本元素。
第二个 SVG 文件只是一个精美的图像，您希望在单击该图像时提交 HTML 页面上的表单。为此，该脚本应该位于您的 HTML 页面中，因为它会与 SVG 和 HTML 表单进行交互。这是一个类似示例，其中 HTML 中的按钮用于控制 SVG。
当您将 SVG 内容内联到 XHTML5 中，而不是引用外部 SVG 文件时，这条线会变得更加模糊。 SVG 内容是它自己的野兽，还是它与特定文本段落一样是 HTML 页面的一部分？
我个人倾向于将 SVG 内联到 HTML 中，从而将所有脚本保留在 SVG 之外。不过，两者都可以。
Placing a
<script>element inside SVG (whether you use code inline or referenced in another file viaxlink: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.For example, let's say you have an HTML page and you include two SVG files.
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.
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?
I personally tend to inline my SVG into the HTML and thus keep all my script outside the SVG. Either will work, though.
您可以使用xlink:href属性调用外部文件。
（来源：W3C）
另外，我推荐您RaphaelJS，一个允许跨浏览器矢量绘图的 JavaScript 库。
You can call an external file using the xlink:href attribute.
(source: W3C)
Also, I recommend you RaphaelJS, a JavaScript library allowing cross-browser vector drawing.