Home

SimpleSvg is simple javascript svg library

API

• append: create element by name and insert to the end of element;
• attr: get attribute by name or set one or more attributes;
• css: get style by name or set one or more style properties;
• each: execute a callback for every element in the matched set;
• empty: remove all child nodes of the set of matched elements from the DOM;
• filter: filter a selection using css selectors;
• html: get the HTML contents of the first element in the set of matched elements or set the HTML contents of each element in the set of matched elements;
• prepend: create element by name and insert to the beginning;
• remove: remove the set of matched elements from the DOM;
• select: select elements from the DOM;
• text: get the combined text contents of each element in the set of matched elements or set the content of each element in the set of matched elements to the specified text;

Sample

Sample of creating SVG rectangle

<div id="container"></div>
<script>
    SimpleSvg.select('#container').append('svg').attr({
        'id': 'svg',
        'width': 400,
        'height': 400
    });
    SimpleSvg.select('#svg').append('rect').attr({
        'y': 10,
        'x': 10,
        'width': '300',
        'height': '100'
    }).css({
        'fill': 'rgb(0,0,255)',
        'stroke-width': 10,
        'stroke': 'rgb(0,0,0)'
    });
</script>