Importing
SVG path data
SVG points
You may wish to import the points from an SVG Polyline or Polygon element. It is important to note the difference of coordinates between SVG and Maker.js points: The Y component is opposite. The remedy for this is simple - use the Y-axis mirror functions of makerjs.point.mirror on every point, or call makerjs.model.mirror on your entire model.
SVG points can be extracted from the value of the points attribute of either polyline or polygon elements:
Either of these SVG elements map nicely to the makerjs.models.ConnectTheDots model. ConnectTheDots accepts an isClosed parameter - set this to false for SVG polylines and true for SVG polygons.
Example:
SVG Path data is the value of the d attribute of a path element. For example, given this SVG:
The path data is:
Call makerjs.importer.fromSVGPathData(pathData) passing your path data string. This will return a new model.
If your SVG path data contains Curve commands, these will become Bezier curves in your model.
Advanced options
You may override the default import behavior by calling
makerjs.importer.fromSVGPathData(pathData, options)
and passing an options object. The options object has these properties:Example: