Drop shadow without stroke.

Post about projects that use Inkscape for web design.
RBeddoe
Posts: 1
Joined: Sat Apr 17, 2010 2:19 am

Drop shadow without stroke.

Postby RBeddoe » Sat Apr 17, 2010 2:26 am

Greeetings. This is my first post on the forum :)

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>

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Drop shadow without stroke.

Postby brynn » Mon Apr 19, 2010 1:28 am

I'm not sure if I can be much help. What I can do is offer suggestions as if this were a problem with Inkscape only. Then maybe you can translate that to your web code. Although I fully realize they may have another to do with each other, in this situation. It may be strictly a code issue.

If you were working in Inkscape, and added a stroke to one object, but found that a stroke was also added to another object, it might mean that your 2 objects are Grouped.

llogg
Posts: 443
Joined: Tue Mar 11, 2008 7:30 am

Re: Drop shadow without stroke.

Postby llogg » Mon Apr 19, 2010 8:49 am

How are you creating your drop shadow? When I open an xml document with your posted code I get a group of four rectangles with strokes in the foreground with an offset of four rectangles of different colors behind that group. I can select the group in the foreground, but not the rectangles in the background.

User avatar
kelan
Posts: 178
Joined: Thu Sep 06, 2007 12:55 am
Location: Unicorn of Open Source
Contact:

Re: Drop shadow without stroke.

Postby kelan » Mon Apr 19, 2010 10:39 pm

The issue you're running into is that filters always use the entire source object, which includes the stroke. As far as I know, there's no way to tell the filter to ignore the source object's stroke.

The workaround is to duplicate your group, place the groups exactly on top of one another, give the strokes to objects in the top group, and have the filter act on the bottom group where the objects do not have strokes. In that case, you can also drop the Blend component of the filter, since you don't need the filter to add the original source graphic in when you have the duplicate group sitting on top.

In fact, since you've got to make a duplicate group anyway, you could get rid of the filter altogether, and offset the bottom group. That would make it easier to change the "drop shadow" colors, since you could just edit the objects directly.


Return to “Inkscape & the Web”