svg via snap and brython?

[John B]

Hello:
I would like to manipulate svg in the browser using Brython, and am interested in doing it one of two ways: import the Brython svg module from the browser, or load the snap.js lib into the window and access it via JSConstructor.  I am new to both, but it appears that snap.js might have a few extra features and conveniences.  Is this true? Is there any advantage to snap.js?

Regardless, I would like to get them both working on a test problem, but am having trouble.  First snap.  I am trying to move a box using the following Brython code (from http://svg.dabbles.info/snaptut-drag):

from browser import document, alert, confirm, prompt
from browser import window
from javascript import JSConstructor

Snap = JSConstructor(window.Snap)
s = Snap(300, 300)
rect = s.rect(20,20,40,40);

def move (dx,dy,x,y,evt):
  print('\nmove')
  print(dx,dy,x,y)
  #rect.transform('t100,100r20,200,200')

def start (x,y,evt):
  print('\nstart')
  print(x,y)

def stop(evt):
  print('\nstop')

rect.drag(move, start, stop);

It works fine, but I don't know how to access the rect object via the move function.  The move function only receives dx,dy,x,y,evt, where evt is a MouseEvent object with only one attribute ('isTrusted') and no methods. Suppose that I have several rectangles and I was using rect2.drag(), rect3.drag() etc.  How would I know which rectangle is calling start, move, and stop?  Said another way, how do I inspect the object that called move? 

Next, svg. If I import svg from browser, the following code works:

from browser import document, alert, confirm, prompt, svg

rect = svg.rect(x="40",y="100", width="40", height="40",
    stroke_width="2",fill="blue")

panel = document['panel']
panel <= rect

I can move it using, for example, rect.y = int(rect.y)-2.

But how do I transform it.  I tried rect.transform("translate(700 210) rotate(-30)") but that raises an error.  It seems that transform is not callable.

Also, does anyone have any simple code that illustrates how animateMotion and animateTransform are used?

Thanks,
John


[John B]

Ah, just found an example of snap and Brython.  This helps.  http://chiamingyen.github.io/kmolab/blog/dao-ru-brython-yu-snapsvg-wang-ji-hui-tu.html