Search code examples
svgshadow

svg shadow on the top and on the left site not present


I have an svg that contains a big D, i want a css text shadow effect without using css. Only svg. I create the shadow using a filter but it is on the top and on the left site not present. How can I fix that?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 744 810">
  <g id="d.svg" transform="matrix(5.0625,0,0,5.0625,-572.7171,-1538.5939)">
    <defs>
      <filter id="shadow" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <path filter="url(#shadow)"
       d="m 239.92578,383.47837 q 0,31.72851 -18.10547,48.60351 -18.01758,16.875 -52.11914,16.875 l -36.38672,0 0,-128.49609 40.3418,0 q 31.46484,0 48.86719,16.61133 17.40234,16.61132 17.40234,46.40625 z m -28.30078,0.70312 q 0,-41.39648 -36.5625,-41.39648 l -14.50195,0 0,83.67187 11.68945,0 q 39.375,0 39.375,-42.27539 z" />
  </g>
</svg>

See this codepen: http://codepen.io/anon/pen/RWNjyG


Solution

  • Set the filter x and y attributes to something negative e.g. "-20%" I.e.

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 744 810" overflow="visible">
      <g id="d.svg" transform="matrix(5.0625,0,0,5.0625,-572.7171,-1538.5939)">
        <defs>
          <filter id="shadow" x="-20%" y="-20%" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
            <feColorMatrix result="matrixOut" in="offOut" type="matrix"
            values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
          </filter>
        </defs>
        <path filter="url(#shadow)"
           d="m 239.92578,383.47837 q 0,31.72851 -18.10547,48.60351 -18.01758,16.875 -52.11914,16.875 l -36.38672,0 0,-128.49609 40.3418,0 q 31.46484,0 48.86719,16.61133 17.40234,16.61132 17.40234,46.40625 z m -28.30078,0.70312 q 0,-41.39648 -36.5625,-41.39648 l -14.50195,0 0,83.67187 11.68945,0 q 39.375,0 39.375,-42.27539 z" />
      </g>
    </svg>

    Note that you may have to increase the filter width/height if you make the x, y so small it affects the right/bottom edges.