Reusing SVG.js code for various SVG's

Question

I'm getting to grips with SVG.js

I have a pattern effect that I've created and would like to use in a number of SVG's.

I can create it in one SVG with the following code...

$( document ).ready(function() {

    var draw = SVG('geo').size(1200, 1700);

    // 100 lines of js creating geometric pattern, effectively this...
    var rect = draw.polygon(coordinates).fill('#fff').stroke({ width: 1, color:'#fff'}).opacity(0)

});

This creates an SVG with ID geo. But I'd like to use this code again to generate various SVG's, ideally with different options (colour etc).

SVG('geo') refers to a particular SVG, how do I make it so I can apply this to any SVG I want on the page?

Hope that made sense

Why not just use the `use` element which is exatly designed for this case? — Fuzzyma, Oct 14 '15 at 22:26

score 1 · Accepted Answer · answered Aug 15 '14 at 14:32

You can define a function that does this repeatedly. Something like the following:

function create_svg(dom_id, width, height, coord) {
  var draw = SVG(dom_id).size(width, height);
  var rect = draw.polygon(coord)
                 .fill('#fff')
                 .stroke({
                   width: 1,
                   color: '#fff'
                 })
                 .opacity(0);
}

$(function() {
  create_svg('geo', 1200, 1700, coordinates);
  create_svg('geo2', 1000, 1500, other_coordinates);
)};

If you need to use the created SVGs further, later on in the code, you could make the create_svg function return the created SVG object to a variable in your document.ready function.

Reusing SVG.js code for various SVG's

1 Answers1