.. _nbsvgrst:

=====================================
Javascript library in a notebook: svg
=====================================


.. only:: html

    **Links:** :download:`notebook <nb_svg.ipynb>`, :downloadlink:`html <nb_svg2html.html>`, :download:`PDF <nb_svg.pdf>`, :download:`python <nb_svg.py>`, :downloadlink:`slides <nb_svg.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_svg.ipynb|*`


Tries `svg <http://svgjs.com/>`__ in a notebook. Example from
`tutorials <http://svgjs.com/tutorials/>`__.

.. code:: ipython3

    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






.. raw:: html

    <div id="M17ee07c6e08343709568c85737ccb6da-cont"><div id="M17ee07c6e08343709568c85737ccb6da" style="width:100%;height:100%;"></div></div>
    <script>

    require(['http://www.xavierdupre.fr/js/svg/svg.min.js'], function() { 
    var divElement = document.querySelector('#M17ee07c6e08343709568c85737ccb6da');
    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>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="M17ee07c6e08343709568c85737ccb6da-cont"><div id="M17ee07c6e08343709568c85737ccb6da" style="width:100%;height:100%;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/svg/svg.min.js'], function() { 
    var divElement = document.querySelector('#M17ee07c6e08343709568c85737ccb6da');
    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>