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

Use multiple separate paths, allow customizing the color of each component, and give a default color #301

Closed
cirosantilli opened this Issue Jan 21, 2017 · 5 comments

Comments

Projects
None yet
2 participants
@cirosantilli

cirosantilli commented Jan 21, 2017

I know this is huge and will never be done, but I have a dream!

Because apple stems are brown, and apples are red.

If we had this, the path split could be done easily from current data: http://stackoverflow.com/questions/33836224/splitting-svg-paths-programmatically

Inkscape has a path split thing: http://stackoverflow.com/questions/8753206/split-shape-defined-by-path-into-sub-paths but I can't use it properly to separate the apple stem.

@Delapouite

This comment has been minimized.

Member

Delapouite commented Jan 21, 2017

I will have to investigate how to do it in JavaScript so it can be integrated directly on the website editor.

But I just tried in InkScape and it worked. I used this icon as a starting point :
http://game-icons.net/lorc/originals/shiny-apple.html

I selected the whole foreground, then use the Path > Break Apart command and was able to apply different colors for the apple, the stem and the shiny effect on the right.

@cirosantilli

This comment has been minimized.

cirosantilli commented Jan 21, 2017

Yes, I was trying with that apple.

Humm, after "break apart", the apple disappears, only black background shows, and outlines reappear when I hover them. But I wasn't able to bucket fill anything.

Also I notice that bucket fill is really glitchy on that image for some reason, sometimes it fills things, others not. Maybe because of my old version.

Another option for the Js would be to just plug it into: https://github.com/SVG-Edit/svgedit and let people bucket fill if you manage to make that work.

@Delapouite

This comment has been minimized.

Member

Delapouite commented Feb 25, 2017

Good news, I managed to emulate the break apart function with a mix of JS and DOM voodoo : https://delapouite.github.io/svg-break-apart/

Next step: integrate this in the studio.

@cirosantilli

This comment has been minimized.

cirosantilli commented Feb 25, 2017

@Delapouite awesome!!!

@Delapouite

This comment has been minimized.

Member

Delapouite commented Mar 7, 2017

Should be good now. I even displayed the apple example : #246 (comment)

@Delapouite Delapouite closed this Mar 7, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment