Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: the best way to include and manipulate external svg? #48

Open
somebody32 opened this issue Feb 3, 2020 · 1 comment
Open

Comments

@somebody32
Copy link

I'm evaluating using rune.js in my project and for now it looks amazing! Thanks for creating it.

The only "blocker" I've found is trying to include and manipulate attributes of an external SVG, for example that one:

<svg xmlns="http://www.w3.org/2000/svg" width="88" height="24" viewBox="0 0 88 24"><path d="M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z"/></svg>

I've tried 2 ways:

  • using SVG plugin, but it fails to parse that SVG (I believe because of the arcs)
  • creating Rune.Node, but then I can't call fill, stroke or any other method on that node

Is there anything I'm overlooking? Thanks in advance!

@runemadsen
Copy link
Owner

Hi there! I think the best and fastest way to solve your problem is to implement the arc method in rune.svg.js so it converts the arc to bezier points. I haven't gotten around to doing this, but any pull requests are welcome :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants