SVGJS-CHEAT-SHEET.md

SVGjs CHEAT SHEET

More info...

Begining of the svg file

Adobe Illustrator will give you something like this, but you must add the width and height attributes based in the viewBox.

<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 510 500" width="510" height="500" style="enable-background:new 0 0 510 500;" xml:space="preserve">

<style type="text/css">
    .hidden { display: none; }
    .pointer { cursor: pointer; }
    @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900|Work+Sans:400,500,600,700);
    .headers{ font-family:'Rubik'; font-weight: 600;}
</style>

Intitialize SvgJs

Insert this line of SVG near the end of the svg file:

<script type="text/javascript" xlink:href="https://cdn.jsdelivr.net/npm/svgjs@2.6.2/dist/svg.min.js"></script>
<script type="text/javascript">
    <![CDATA[

    ]]>
</script>

If you put the javascript in the begining:

SVG.on(document, 'DOMContentLoaded', function() {
    
});

Read the DOM

Select

var redButton = SVG.select("#redbutton");

var allButtons = SVG.select("#button1, #button2, #button3");

Parent

redButton.parent().addClass("the_father");

Classes

Classes are very important to manage state and work with animations.

Add a class

redButton.addClass("large");

Remove class

redButton.removeClass("large");

Toggle class

redButton.toggleClass("hidden");

Has this class?

redButton.hasClass("hidden");

Events

Click

Add the event:

redButton.click(function(){
    redWindow.toggleClass("hidden");
    redButton.toggleClass("hidden");
});

Remove the event:

redButton.click(null);

On

redButton.on("click", function(){
    this.toggleClass("hidden");
    redButton.toggleClass("hidden");
});