search

microsoft / maker.js

📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
http://maker.js.org
Apache License 2.0
1.74k stars 264 forks source link

Emitting svg to specific element #351

Open icodk opened 5 years ago

icodk commented 5 years ago

All examples are in the form document.write(svg); What is the best way to emit svg to specific element/area/div ? Thanks

danmarshall commented 5 years ago

Hello, in those examples I used document.write(svg); because it's the least amount of characters, and least amount of concepts. I didn't want to the tutorial to need to explain the DOM.

Also, trying to be agnostic to whether you are in Node.js or the browser, or a web worker.

Since you are in the browser, you may want to:

element.innerHTML = svg;

where element is an element that you may have gotten using document.querySelector.

icodk commented 5 years ago

@danmarshall Thanks. Not an expert (including javascript:-) I would like to replicate your Demo functionality but without the code window. Could you give me some clues ? Thanks in advance

danmarshall commented 5 years ago

Hi @icodk - I am planning on creating something like this. However, it may be a while until I get to it. Maybe an easy start would be to fork the project and hide the code editor with CSS.

icodk commented 5 years ago

Sounds good. For none expert like me, it is rather complex to disect your playground code and to create new application with all the great functionality from the demo. I have no problem in generating an svg output to an svg element. Creating zoomable canvas and a parmeter menu is another story. Nither could i find documentation for metaParameter. A vue component could be great :-) Thanks for a great library

danmarshall commented 5 years ago

Thanks for the feedback. I'll need to add documentation for metaParameter. I'm also in the process of componentizing things, so you can reuse playground components. I'll update this thread when that happens. Thanks! 👍