在SVG中使用JavaScript

最新推荐文章于 2024-07-22 14:15:06 发布

cungui5726

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量1.2k

点赞数 1

文章标签： java python js linux html ViewUI

原文链接：https://thenewcode.com/1094/Using-JavaScript-in-SVG

版权

Web developers use JavaScript to achieve many things in SVG, including animation, interaction, creating and modifying elements, but adding a script inside an SVG document comes with a few special caveats:

Web开发人员使用JavaScript实现SVG中的许多功能，包括动画，交互，创建和修改元素，但是在 SVG文档中添加脚本有一些特殊的警告：

JavaScript can be added anywhere in an SVG document between the opening and closing <svg> tags. In general, a script should be placed at the end of the document to avoid blocking and allow the script complete access to the DOM.
可以在<svg>标记之间的SVG文档中的任何位置添加JavaScript。通常， 应将脚本放在文档的末尾，以避免阻塞并允许脚本完全访问DOM。
Most resources will tell you to set the script’s MIME type (i.e. <script type="text/javascript"> or <script type="application/ecmascript">). However, this isn’t necessary: JavaScript/ECMAScript is the default in browsers, and doesn’t need to be stated, even in the context of SVG.
大多数资源都会告诉您设置脚本的MIME类型(即<script type="text/javascript">或<script type="application/ecmascript"> )。但是， 这不是必需的 ：JavaScript / ECMAScript是浏览器中的默认值，即使在SVG的上下文中也不需要声明。
Similarly, most resources will tell you to wrap your JavaScript code in <[CDATA[ when it is inside an SVG:
同样，大多数资源会告诉您将JavaScript代码包装在<[CDATA[时，将其包装在SVG中：
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <script>//<![CDATA[
        …code…
    //]]>
    </script>
</svg>
```
Because browsers will sometimes attempt to parse JavaScript as XML inside SVG, becoming terminally confused in the process, the commented CDATA “protects” the script from this interpretation. Modern browsers don’t necessarily need this protection, but it’s the safest approach.
由于浏览器有时会尝试将JavaScript解析为SVG中的XML ，从而在处理过程中最终造成混乱，因此注释的CDATA“保护”了该解释的脚本。现代浏览器不一定需要这种保护，但这是最安全的方法。

You can reference external scripts, but must use xlink: to do so:

您可以引用外部脚本，但必须使用xlink:这样做：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <script xlink:href="external.js" />
</svg>

SVG is XML, not HTML, so a few methods associated with the DOM, such as innerHTML, don’t work in SVG (although there are workarounds).
SVG是XML，而不是HTML，因此与DOM相关联的一些方法(例如innerHTML在SVG中不起作用(尽管有解决方法)。

Otherwise, JavaScript works in much the same way as it would in an HTML document: you can reference ids, elements, etc, like normal. The only special consideration is creating and addressing case-sensitive namespaced elements, which I will address in a future article.

否则，JavaScript的工作方式与HTML文档中的工作方式几乎相同：您可以像平常一样引用id，元素等。唯一的特殊考虑是创建和处理区分大小写的命名空间元素，我将在以后的文章中解决。

潜在的挫败感 (Potential Frustrations)

The most common confusion when embedding JavaScript in SVG is the fact that SVG documents added to the page as images will have their JavaScript ignored. That is:

将JavaScript嵌入SVG时，最常见的混乱事实是， 作为图像添加到页面的SVG文档将被忽略其JavaScript 。那是：

<img src="getfunky.svg" alt="" >

…will have any JavaScript inside the SVG ignored (SMIL won’t be ignored in some browsers, but SMIL is scheduled to deprecated in any case). There are two possible ways around this:

…将忽略SVG内部的任何JavaScript(在某些浏览器中不会忽略SMIL，但计划在任何情况下都弃用SMIL)。有两种可能的解决方法：

Embed the SVG directly in the page, rather than referencing it as an image:
将SVG直接嵌入页面中，而不是将其引用为图像：
```
<html lang="en">
…

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <script>//<![CDATA[
        …code…
    //]]>
    </script>
</svg>
```
In which case, the JavaScript is just as effectively written outside the SVG, elsewhere in the page:
在这种情况下，JavaScript可以有效地写在SVG之外的页面其他地方：
```
<html lang="en">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    …
    </svg>
    <script>
    …
    </script>
</html>
```
Alternatively, you can reference the SVG as an <object> or <iframe> inside the HTML:
或者，您可以在HTML内将SVG引用为<object>或<iframe> ：
```
<object data="getfunky.svg" type="image/svg+xml">
    <img src="fallback.jpg">
</object>
```

In either case, JavaScript inside the SVG will be respected and run, influencing the vector data.

无论哪种情况，SVG内部JavaScript都将受到尊重并运行，从而影响矢量数据。

翻译自: https://thenewcode.com/1094/Using-JavaScript-in-SVG

cungui5726

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在SVG中使用JavaScript

Web developers use JavaScript to achieve many things in SVG, including animation, interaction, creating and modifying elements, but adding a script inside an SVG document comes with a few special cave...
复制链接

扫一扫