SVG基础以及使用Javascript DOM操作SVG - 管的宽(2)_H5之家

getBBox方法可以获取所有元素的高宽和坐标：

// SVG <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>; // JS <script> var text = document.getElementById( "text" ); console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25} </script> 事件处理

SVG也可以像HTML那样为元素添加自定义事件。
使用on + 事件名属性监听：

// SVG <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>; // JS <script> var text = document.getElementById( "text" ); // 点击文本时弹出其内容 text.onclick = function() { alert( this.textContent ); }; </script>

也可以使用element.addEventListener方法监听：

// SVG <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>; // JS <script> var text = document.getElementById( "text" ); // 点击文本时弹出其内容 // 事件名前面不带on text.addEventListener( 'click', function() { alert( this.textContent ); } ); </script>

两种方法有什么不同？on + 事件名属性只能为同一个事件添加一个处理方法，再对这个属性进行设置时会覆盖掉上一个方法，而element.addEventListener多次使用也不会覆盖上一个，而是从原来的事件上叠加。