Javascript library in a notebook: svg¶

Links: notebook, html, PDF, python, slides, slides(2), GitHub

Tries svg in a notebook. Example from tutorials.

from jyquickhelper import RenderJS
css = None
libs = ['http://www.xavierdupre.fr/js/svg/svg.min.js']
script = """
var divElement = document.querySelector('#__ID__');
divElement.innerHTML = '<svg id="draw"></svg>';

var canvas = SVG('draw').size('600', '300')
  , rect = canvas.rect(5, 5)
  , path = canvas.path("M 340,178 104,478 580,490 Z")
  , length = path.length()

path.fill('none').stroke({width:1, color: '#ccc'}).move(10,10).scale(0.5)
path.animate(3000).rotate(365).loop();

rect.animate(5000, '<>').during(function(pos, morph, eased){
    var m = path.matrixify()
    var p = new SVG.Point(path.pointAt(eased * length)).transform(m)
    rect.move(p.x, p.y)
}).loop(true, true)
"""
jr = RenderJS(script, css=css, libs=libs)
jr
print(jr._repr_html_())
<div id="M7808c60cb48a493bb41d33d05fa1d3db-cont" style="width:100%;height:100%;"><div id="M7808c60cb48a493bb41d33d05fa1d3db"></div></div>
<script>
require(['http://www.xavierdupre.fr/js/svg/svg.min.js'], function() {
var divElement = document.querySelector('#M7808c60cb48a493bb41d33d05fa1d3db');
divElement.innerHTML = '<svg id="draw"></svg>';
var canvas = SVG('draw').size('600', '300')
  , rect = canvas.rect(5, 5)
  , path = canvas.path("M 340,178 104,478 580,490 Z")
  , length = path.length()
path.fill('none').stroke({width:1, color: '#ccc'}).move(10,10).scale(0.5)
path.animate(3000).rotate(365).loop();
rect.animate(5000, '<>').during(function(pos, morph, eased){
    var m = path.matrixify()
    var p = new SVG.Point(path.pointAt(eased * length)).transform(m)
    rect.move(p.x, p.y)
}).loop(true, true)
 });
</script>