Event Listener

by Online Tutorials Library July 14, 2022

Event Listener

In SVG, you can add the various event listeners to an SVG shape directly.

Example:

  <!DOCTYPE html>  <html>  <body>  <svg width=”500″ height=”150″>    <rect x=”10″ y=”10″ width=”100″ height=”75″     style=”stroke: black; fill: silver; fill-opacity: .4;”     onmouseover=”this.style.stroke = ‘blue’; this.style[‘stroke-width’] = 5;”     onmouseout=”this.style.stroke = ‘green’; this.style[‘stroke-width’] = 1;”/>    </svg>  </body>  </html>  

Test it Now

Transforming the Coordinate System

Using the transform attribute, you can move the graphics to a new location. You can also rotate or scale the graphics. You have to add the transform attribute to the appropriate SVG elements for transforming the coordinate system.

Next TopicSVG Blur Effects

Event Listener

Event Listener

Example:

Transforming the Coordinate System

Learn SQLite Tutorial

Difference between function and method in Swift

You may also like