Search code examples
svgsvg-filtersdropshadow

SVG Filter applying to Path in only one of two very similar SVGs

I have been over this but I cannot ascertain why the Drop Shadow SVG Filter is applying itself successfully to the first SVG, but not to the second.

  • each SVG contains a <rect /> element
  • each SVG contains either one or two <path /> elements
  • in each SVG, the Drop Shadow SVG Filter is identical

Two SVGs (filter successfully applied in first but not in second):

div {
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 24px;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg"
     lang="en-GB"
     id="return"
     viewBox="0 0 489 489">

<title>Return Icon</title>

<defs>
<style type="text/css"><![CDATA[

#return {
transform: scaleY(-1);
}

rect {
fill: rgb(255, 0, 0);
}

path {
fill: rgb(255, 255, 255);
filter: url(#drop-shadow);
}

]]></style>

<filter id="drop-shadow">
<feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="-10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="-10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
</filter>

</defs>

<rect width="489" height="489" />

<path d="M375.789,92.867H166.864l17.507-42.795c3.724-9.132,1-19.574-6.691-25.744c-7.701-6.166-18.538-6.508-26.639-0.879 L9.574,121.71c-6.197,4.304-9.795,11.457-9.563,18.995c0.231,7.533,4.261,14.446,10.71,18.359l147.925,89.823 c8.417,5.108,19.18,4.093,26.481-2.499c7.312-6.591,9.427-17.312,5.219-26.202l-19.443-41.132h204.886 c15.119,0,27.418,12.536,27.418,27.654v149.852c0,15.118-12.299,27.19-27.418,27.19h-226.74c-20.226,0-36.623,16.396-36.623,36.622 v12.942c0,20.228,16.397,36.624,36.623,36.624h226.74c62.642,0,113.604-50.732,113.604-113.379V206.709 C489.395,144.062,438.431,92.867,375.789,92.867z" />

</svg>
</div>

<div>
<svg xmlns="http://www.w3.org/2000/svg"
     lang="en-GB"
     viewBox="0 0 20 20">

<title>Case Sensitive Icon</title>

<defs>

<style><![CDATA[

rect {
  fill: rgb(255, 0, 0);
}

path {
  fill: rgb(255, 255, 255);
  filter: url(#drop-shadow);
}

#upper-case,
#lower-case {
  transform: translate(-2px, -2px);
}

]]></style>


<filter id="drop-shadow">
<feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="-10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
<feDropShadow dx="-10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
</filter>

</defs>

<rect width="20" height="20" />

<g id="case-sensitive">
<path id="upper-case" d="M7.53 7L4 17h2.063l.72-2.406h3.624l.72 2.406h2.062L9.65 7h-2.12zm1.064 1.53L9.938 13H7.25l1.344-4.47z" />
<path id="lower-case" d="M18.55 17l-.184-1.035h-.055c-.35.44-.71.747-1.08.92-.37.167-.85.25-1.44.25-.564 0-.955-.208-1.377-.625-.42-.418-.627-1.012-.627-1.784 0-.808.283-1.403.846-1.784.568-.386 1.193-.607 2.208-.64l1.322-.04v-.335c0-.772-.396-1.158-1.187-1.158-.61 0-1.325.18-2.147.55l-.688-1.4c.877-.46 1.85-.69 2.916-.69 1.024 0 1.59.22 2.134.662.545.445.818 1.12.818 2.03V17h-1.45m-.394-3.527l-.802.027c-.604.018-1.054.127-1.35.327-.294.2-.442.504-.442.912 0 .58.336.87 1.008.87.48 0 .865-.137 1.152-.414.29-.277.436-.645.436-1.103v-.627" />
</g>

</svg>
</div>

I'd like to successfully apply the Drop Shadow SVG Filter to the second SVG in the same way as to the first.

Solution

  • You are applying a filter defined on a 489x489 viewBox to an SVG with a 20x20 viewBox;

    the duplicate IDs also won't help

    If I multiply the lowercase a by 20 to a 400x400 viewBox your filter works fine:

    <svg height="180px" xmlns="http://www.w3.org/2000/svg" lang="en-GB" viewBox="0 0 400 400">
  <style>
    rect {
      fill: rgb(255, 0, 0);
    }
    path {
      fill: rgb(255, 255, 255);
      filter: url(#drop-shadow);
    }
    #upper-case,
    #lower-case {
      transform: translate(-2px, -2px);
    }
  </style>
  <defs>
    <filter id="drop-shadow">
      <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
      <feDropShadow dx="10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
      <feDropShadow dx="-10" dy="-10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
      <feDropShadow dx="-10" dy="10" stdDeviation="10" flood-color="rgb(0, 0, 0, 0.3)" />
    </filter>
  </defs>
  <rect width="20" height="20" />
  <g id="case-sensitive">
    <path id="upper-case" d="M7.53 7L4 17h2.063l.72-2.406h3.624l.72 2.406h2.062L9.65 7h-2.12zm1.064 1.53L9.938 13H7.25l1.344-4.47z" />
    <path id="lower-case" d="M371 340l-3.7-20.7h-1.1c-7 8.8-14.2 14.9-21.6 18.4c-7.4 3.3-17 5-28.8 5c-11.3 0-19.1-4.2-27.5-12.5c-8.4-8.4-12.5-20.2-12.5-35.7c0-16.2 5.7-28.1 16.9-35.7c11.4-7.7 23.9-12.1 44.2-12.8l26.4-.8v-6.7c0-15.4-7.9-23.2-23.7-23.2c-12.2 0-26.5 3.6-42.9 11l-13.8-28c17.5-9.2 37-13.8 58.3-13.8c20.5 0 31.8 4.4 42.7 13.2c10.9 8.9 16.4 22.4 16.4 40.6V340h-29m-7.9-70.5-16 .5c-12.1.4-21.1 2.5-27 6.5c-5.9 4-8.8 10.1-8.8 18.2c0 11.6 6.7 17.4 20.2 17.4c9.6 0 17.3-2.7 23-8.3c5.8-5.5 8.7-12.9 8.7-22.1v-12.5" />
  </g>
</svg>