Inkscape vs. Browser SVG Filter Postioning

I ended last night's Polymer / SVG effort with a problem. Not so much a Polymer problem as an SVG problem. I have some fairly simple DOM animation triggered by mouse-overs:



All of this works, except the stinking drop shadow filter, which is getting clipped. This seemed a simple problem at first—I assumed that I only needed to resize the SVG “pepperoni” in my <x-pizza> pizza building custom element. But no matter how I resized the SVG—attributes, style, mucking with the SVG itself, or even trying it different browsers—I could not get the shadow to be unclipped. I am honestly tempted to just drop it (yeah, I said it) and move on to other, more Polymer-y things. But darn it, why won't it unclip? (declip?)

Happily, Emanuele Sabetta had a suggestion in last night's comments. Instead of fiddling with the elements attributes, perhaps I need to change the filter attributes.

So I fire up Inkscape again, open my pepperoni SVG file, and start the Filter Editor (Filters → Filter Editor…):



First off, wow. That is a lot of filtering for a simple drop shadow. Looking through it, I can understand why some of it is needed, but two blurs? Anyhow, after recovering from filter astonishment, I see that the filter area (the dashed box) does seem to clip some of the drop shadow. Hopefully this is the problem. I change the width and height to 1.5—it would seem that is 1.5× the path being shadowed, not the entire image. I then adjust the center of the filter accordingly so that it still encompasses the area that I would like to see the effect:



Checking the resulting XML in Inkscape's XML Editor, I see that this results in three new attributes to the filter:



Well, heck. I can type those in myself in the SVG being used in <x-pizza>:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="32"
   height="32">
  <defs>
    <filter
       color-interpolation-filters="sRGB"
       height="1.5"
       width="1.5"
       y="-0.4"
       id="filter3790">
      <feFlood
      <!-- ... -->
  </defs>
  <!-- ... -->
</svg>

And, when I reload that in the browser, I find:



Arrrgh! Are you kidding me?! It's still clipped!

Ah, but it is not clipped as much, and not at all in the x-direction. So I change the height to 2.5, reload and...



<Sniff>. It's so beautiful!

I am unsure why there is a discrepancy between Inkscape's bounding area in the Filter Editor and the area that is actually clipped in the image. I trial-and-error the actual lower limit of the height and y-position of the filter to find:

    <filter
       color-interpolation-filters="sRGB"
       height="2.0"
       width="1.5"
       y="-0.2"
       id="filter3790">

So fiddling with the values in Inkscape's Filter Editor put me on the right track, but only manual intervention got me the full solution:



No matter how I got the solution, I will take it.


Day #73

‹prev | My Chain | next›