andreaferretti / paths-js

Generate SVG paths for geometric shapes :bar_chart:
http://andreaferretti.github.io/paths-js-react-demo/
Apache License 2.0
1.72k stars 84 forks source link

No working examples #14

Closed zhaizhai closed 10 years ago

zhaizhai commented 10 years ago

The documentation could really use some minimal working code snippets. How do you convert the Path() object into an actual svg element?

Edit: never mind, I just somehow scrolled past that part of the docs. Still, it would be nice to emphasize it more (e.g. with a "Getting started" header).

andreaferretti commented 10 years ago

Have you seen the demo? You can click on each example to see the source. The whole source for the demo in another repository and there is also a smaller example I made for a talk.

In any case, the answer for your question is that path objects have a method print() that returns a string that you can put as the d attribute of a <path> element inside an svg. Usually you do this in template, like (invented template syntax)

<svg>
  {% for curve in curves %}
    <path d="{ curve.path.print() }" fill="none" stroke="red" />
  {% end for %]
</svg>

I recognize that I need to improve the documentation, but I hope this is enough to get you started. Please, let me know if it works for you.