SVG.js Playground

Just a default setup to start fiddling

by kzima

HTML

<div id="drawing"></div>

JavaScript

// initialize SVG.js
var draw = SVG('drawing')

// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')
draw.svg('<g id="fence"><rect width="100" height="50" fill="#f06"></rect></g>')
var elements = SVG.select('#fence').fill('#f06')
// elements.animate().move(200, 200)
elements.on("mouseover", function() {
console.log("111")
  elements.attr({
  fill: '#f06', 'fill-opacity': 0.5, stroke: '#000', 'stroke-width': 10
})
})
elements.on("mouseout", function() {
console.log("111")
  elements.attr({
  fill: 'blue', 'fill-opacity': 0.5, stroke: 'blue', 'stroke-width': 10
})
})