![Smile :)](images/smilies/icon_e_smile.gif)
I make vinyl signage for vehicles and I would like to provide a preview tool on my website. A common effect for vinyl lettering is drop shadow and/or outline of the main graphic. In some cases, these two effects can be different colors. When I attempt to create a drop shadow with it's own color and also add a stroke to the main graphic, the stroke gets carried to the drop shadow. How can I prevent the drop shadow from having a stroke? Notice I can change the drop shadow color but not the stroke that's attached to it.
Thanks,
Rick
Code: Select all
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 1100 400" version = "1.1">
<filter id = "i1" width = "150%" height = "150%" stroke="none">
<feOffset result = "offOut" in = "SourceGraphic" dx = "30" dy = "30"/>
<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "1 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feBlend in = "SourceGraphic" in2 = "matrixOut" mode = "normal" />
</filter>
<g stroke-width = "10" filter = "url(#i1)">
<rect x = "10%" y = "10%" width = "20%" height = "20%" stroke = "blue" fill = "wheat"/>
<rect x = "40%" y = "10%" width = "20%" height = "20%" stroke = "green" fill = "tomato"/>
<rect x = "10%" y = "40%" width = "20%" height = "20%" stroke = "red" fill = "forestgreen"/>
<rect x = "40%" y = "40%" width = "20%" height = "20%" stroke = "yellow" fill = "grey"/>
</g>
</svg>