SVG path data
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.
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:
|property||type||values / effects|
|bezierAccuracy||number||The maximum distance between the true curve and the arc approximations. A lower number is more accurate but requires more computation. Using zero is not recommended as it may never finish computing. This number is relative to the unit system of your SVG; so if you are rendering pixels, then 0.5 is accurate to half a pixel.|
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.