simple SVG.js starter

Just a default setup to start fiddling

by linzoey

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>

JavaScript

// initialize SVG.js
let draw = SVG().addTo('body').size(1000, 1000)

let circle = draw.circle(200, 100).move(100, 50).fill('#666666')

// draw pink square
let rect = draw.rect(100, 100).move(100, 50).fill('#f06')
rect.fill({ color: '#f06', opacity: 0 })
rect.stroke({ color: '#f06', opacity: 1, width: 5 })

draw.on('click', (e) => {
  console.log('hi!')
})

SVG.on(rect, 'mousemove', (e) => {
    const { x, y } = rect.point(e.pageX, e.pageY);
    console.log(e.pageX,e.pageY);
    })
    
console.log(rect.attr(['width','height']))