时间戳

首页 > 解决方案 > JavaScript-SVG 事件对应是如何工作的？

javascript - JavaScript-SVG 事件对应是如何工作的？

问题描述

使用 Inkscape 已经有一段时间了，现在我开始学习 JavaScript，我非常热衷于制作交互式矢量图形。尽管如此，我很难理解不同事物的某些方面是如何工作的。使用本教程作为参考（http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/），我想知道是否有人可以通过回答我的几个问题来帮助我理解关于它：

  1. 据我了解，在 SVG 语言中，evt 只是事件的别名，但它接受作为参数的究竟是什么事件？它是否连续运行并一直接受新参数，以便它首先接受单击，然后是拖动，然后是释放，然后什么都没有，然后什么都没有，然后再单击、拖动等等？

  2. 为什么onload="makeDraggable()"在 中声明<svg ...>，为什么在个人中声明它不起作用<path ...>，也没有在中声明<body ...>？

  3. 为啥，后面那个线

var transforms = selectedElement.transform.baseVal;

当我们改变transforms的值时，selectedElement.transform.baseVal的值也会改变吗？

我希望我的问题不会太模糊以至于无法回答。先感谢您！

标签： javascripthtmleventssvg

解决方案

  1. 在 javascript 中，您可以将传递给事件处理程序的事件属性命名为您想要的任何名称。function startDrag(bob)也可以。每次触发您的一个事件处理函数时，都会创建一个新的事件对象，该对象将传递给事件处理函数。

  2. makeDraggable 函数在整个 svg 文件上创建鼠标事件处理程序，但在这些事件处理程序函数中，它们在 evt.target 上执行拖动，这将是鼠标所在的元素。每次单击 svg 文件中的某些内容时，都会传入一个新的事件对象，该对象的 evt.target 设置为鼠标所在的任何位置。

  3. baseVal 是一个对象，transforms 被赋予了对该对象的引用，因此对 transforms 的任何更改都与对 baseVal 的更改相同。有关更多信息，请查看 JavaScript 中值类型和引用类型之间的区别。

推荐阅读