SVG与JS交互.pdf

在SVG与JavaScript交互中，SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它可以被JavaScript脚本直接操纵以实现丰富的交互性。在SVG文档中，JavaScript的使用分为内部脚本和外部脚本两种方式。 1. **内部脚本**： 内部脚本是直接将JavaScript代码嵌入到SVG文档的`<script>`标签内，通常使用`<![CDATA[...]]>`来包裹代码，防止XML解析器将其解释为XML标记。这样可以方便地在SVG文档中直接编写和执行JavaScript，但当脚本变得复杂时，代码组织会变得混乱，不利于维护。 2. **外部脚本**： 外部脚本则通过`<script xlink:href="...">`引用一个独立的JavaScript文件，这种方式使代码分离，提高了可维护性。`xlink:href`属性用于指定JS文件的位置，如果文件不在同一目录下，需要正确设置路径。 在进行SVG与JavaScript交互时，需要注意SVG文档的编码问题，确保外部脚本文件和SVG文件使用相同的编码，尤其是当代码中包含中文字符时，避免因编码不一致导致的运行异常。 SVG支持DOM（Document Object Model）标准，特别是DOM2，使得JavaScript可以动态操作SVG元素。以下是一些SVG DOM的常用属性和方法： 1. **evt属性**： 在事件处理函数中，`evt`对象代表事件本身，可以获取与事件相关的信息，如事件类型、位置等。 2. **ownerDocument属性**： 通过`evt.target.ownerDocument`可以获取SVG文档对象，即SVG的DOM结构，这有助于访问和操作SVG元素。 3. **getOwnerDocument()方法**： 类似于`ownerDocument`属性，但作为方法调用，同样用于获取SVG文档对象。 4. **target属性**： `evt.target`返回事件触发的SVG元素，可能包括其父元素。可以用来定位并操作发生事件的元素。 5. **getTarget()方法**： 和`target`属性类似，但作为一个方法调用，用于获取事件源。 下面是一个示例代码（例程12-1），演示了如何在SVG文档加载完成后获取SVG DOM结构： ```xml <svg width="640" height="480" onload="init(evt)"> <script><![CDATA[ function init(evt){ svgDoc = evt.target.ownerDocument; svgRoot = svgDoc.rootElement; alert(svgRoot.nodeName); } ]]></script> <rect x="100" y="100" width="100" height="50" fill="red" stroke-width="2"/> </svg> ``` 在这个例子中，SVG文档加载时会触发`onload`事件，调用`init`函数。函数获取SVG文档对象并找到其根元素（即`SVG`标签），最后弹出一个对话框显示"SVG"，表明成功获取到了SVG的根元素。 由于不同的SVG解析器对JavaScript的支持程度不同，开发时应以兼容性良好的解析器（如Adobe SVG Viewer）提供的API为准，确保在各种环境下都能正常工作。此外，了解和熟练运用SVG DOM的各种属性和方法，是实现SVG图形动态交互的关键。