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
<?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:
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:
<filter color-interpolation-filters="sRGB" height="2.0" width="1.5" y="-0.2" id="filter3790">
No matter how I got the solution, I will take it.