Baking transforms into SVG Path Element commands

by

I have made a general SVG flattener flatten.js, that supports all shapes and path commands:
https://gist.github.com/timo22345/9413158

Basic usage: flatten(document.getElementById('svg'));

What it does: Flattens elements (converts elements to paths and flattens transformations).
If the argument element (whose id is above ‘svg’) has children, or it’s descendants has children,
these children elements are flattened also.

What can be flattened: entire SVG document, individual shapes (path, circle, ellipse etc.) and groups. Nested groups are handled automatically.

How about attributes? All attributes are copied. Only arguments that are not valid in path element, are dropped (eg. r, rx, ry, cx, cy), but they are not needed anymore. Also transform attribute is dropped, because transformations are flattened to path commands.

If you want to modify path coordinates using non-affine methods (eg. perspective distort),
you can convert all segments to cubic curves using:
flatten(document.getElementById('svg'), true);

There are also arguments ‘toAbsolute’ (convert coordinates to absolute) and ‘dec’,
number of digits after decimal separator.

Extreme path and shape tester: https://jsfiddle.net/fjm9423q/embedded/result/

Basic usage example: http://jsfiddle.net/nrjvmqur/embedded/result/

CONS: text element is not working. It could be my next goal.

More Related Contents:

  1. Convert SVG to image (JPEG, PNG, etc.) in the browser
  2. jQuery SVG, why can’t I addClass?
  3. How to add a tooltip to an svg graphic?
  4. Changing SVG image color with javascript
  5. With JavaScript, can I change the Z index/layer of an SVG element?
  6. How to check if an embedded SVG document is loaded in an html page?
  7. How can d3.transform be used in d3 v4?
  8. How do you access the contents of an SVG file in an element?
  9. How to save svg canvas to local filesystem
  10. How to prevent an HTTP request just for a favicon?
  11. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  12. How to draw a path smoothly from start point to end point in D3.js
  13. Is there some innerHTML replacement in SVG/XML?
  14. (Embed and) Refer to an external SVG via D3 and/or javascript
  15. Plotting points on a map with D3
  16. How can I animate a progressive drawing of svg path?
  17. Circles in Map Displayed Incorrect Location in D3 V4
  18. How to draw a vector path progressively? (Raphael.js)
  19. Add names of the states to a map in d3.js
  20. size of createElement(“svg”) is 0,0
  21. How to show SVG file on React Native?
  22. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  23. How does transforming points with a transformMatrix work in fabricJS?
  24. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  25. Perspective transform of SVG paths (four corner distort)
  26. Programmatically creating an SVG image element with javascript
  27. Does the attr() in jQuery force lowercase?
  28. draw text in d3 arc javascript
  29. jQuery SVG vs. Raphael [closed]
  30. Create a table in SVG

Leave a Comment