StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's how to do this with Fabric:</p> <pre><code>fabric.loadSVGFromURL('/assets/72.svg', function(objects, options){ var group = fabric.util.groupSVGElements(objects, options); group .set({ left: 300, top: 200 }) .scaleToWidth(500) .setCoords(); canvas.add(group); }, reviver); function reviver(element, object) { object.id = element.getAttribute('id'); } </code></pre> <p>The code should be pretty self-explanatory. We load SVG; Fabric parses it internally, spitting out set of objects representing each element. We then group those elements and add them onto canvas in one chunk. Reviver is responsible for reading id off of each SVG element and assigning it to a corresponding fabric instance.</p> <p>Run this snippet in <a href="http://fabricjs.com/kitchensink/">http://fabricjs.com/kitchensink/</a> and you get:</p> <p><img src="https://i.stack.imgur.com/zeA00.png" alt="loaded svg"></p> <p>Let's inspect this grouped object:</p> <pre><code>canvas.item(0) + ''; "#<fabric.PathGroup (29303): { top: 200, left: 300 }>" </code></pre> <p>And its children:</p> <pre><code>canvas.item(0).getObjects(); // Array[2287] </code></pre> <p>Let's retrieve one by id:</p> <pre><code>var greenland = canvas.item(0).getObjects().filter(function(obj) { return obj.id === 'path4206'; })[0]; </code></pre> <p>This is all plain old Javascript, as you can see. Let's change color of that particular object/shape now:</p> <pre><code>greenland.fill = 'red'; </code></pre> <p><img src="https://i.stack.imgur.com/oHGAs.png" alt="greenland in red"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload