Shadow on an SVG

I'm currently using new SVG(path). What's the most performant way to add a shadow to it? Also, if I want to clone it 20+ times.

Well... here are some options you can try - note, you may need to set a "complete" event on the SVG before doing these:

  1. .sha() which is just a wrapper for the CreateJS shadow property. It is vector based so somewhat intensive.

  2. Set the sha() of the SVG and add the SVG to a Container, then cache({margin:50}) the container.

  3. Instead of adding sha() duplicated the SVG with clone() or remake with dark color if possible and add that to the bottom of the container above. Possibly cache the background SVG or the whole container.

  4. Make an image of the SVG in Photoshop, etc. and add the shadow there.

I would say that 4 is the most performant but not dynamic. Otherwise, probably one of the cache() options.

1 Like

Given the workflow, #2 or the like is prolly best. Thanks Dr.!

1 Like