DrawSVG - queue inset paths?

[LilaQ]

Hey guys,

 

I hope I can get this across since english isn't my native language.

 

I have a SVG-Logo which consists of several letters which have inset paths (like the "O", outside path, and inside path).

 

Is there a way I can queue the inset paths to be drawn after the outside paths, and still be able to fill the whole letter?

 

 

I tried to exclude the inset path to its own <path> element - this way I can draw the paths one after another. But I guess now I won't be able to fill the area between the outer and the inner path, only the area inside the inner path which is supposed to be transparent.

 

I made a CodePen of it (without the actual images, I don't know how to import local images into a CodePen yet; the background is a close-up of human skin, the red box is actually an arm / hand holding a tattoo machine)

 

 

Thanks in advance, you guys always find a way, I really love the forums here <3

 

Best regards,

 

See the Pen emzdwq by LilaQ (@LilaQ) on CodePen

[Michael71]

To import images for a non-pro account you can use free hosting websites like photobucket and link them from there as they provide a url to use as image source, and it works for cross-domain linkage.

 

For the fill you can fill the outer element like this: 

TweenLite.set("path1",{fill:"#ff0000"});

And the inner like this for transparency (I haven't tested this on svg but it should work I guess)

TweenLite.set("path-inner",{fill:"rgba(255,255,255,0)"});

[LilaQ]

If I fill the inner like you said, wouldn't that just show the color of the outer path? Since it lays over the outer path-object?!

 

Please correct me if I'm wrong.

[LilaQ]

I just checked the W3 Docs and fiddled around with the 2 objects, there is no way to overwrite the bottom elements colored fill with the top elements transparent fill, so I guess this is a dead end.

 

Only other way I would see is a non-minified version of the DrawSVGPlugin and modifiy it to tween multiple lines in a single path-object consecutively.

 

Any hints, ideas etc.?