SVG filter using mixed percentage and fixed unit dimensions does not work

Question

I've been updating a site with some SVG goodness, and have gotten a lot accomplished. I am stuck on adding a drop shadow to the SVG shape however. Here is the code:

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
    <filter id="shadow" y="-10" x="-10" width="85%">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset" />
      <feGaussianBlur in="offset" stdDeviation="10" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1); filter: url(#shadow);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

If I remove the code for the filter, the shape displays fine:

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

If I just remove the reference to the filter from the style attribute style="fill: url(#gradient1);" it works fine.

Any idea what I'm doing wrong? I've tried: changing order of the elements in , removing one of the s in the svg, and removing the linearGradient. Nothing gets it to work.

Answer 1

SVG doesn't like when you mix unit systems - it's far less forgiving than CSS. You can't mix pixels (or technically userSpaceUnits) and %'s in your filter dimensions. If you change:

<filter id="shadow" y="-10" x="-10" width="85%">

to

<filter id="shadow" y="-10%" x="-10%" width="85%">

The filter will work (although I don't know why you would pick those dimensions).