顶部和左侧网站上的 svg 阴影不存在

Question

我有一个包含大 D 的 svg，我想要 css 文本阴影效果而不使用 css。只有 svg。我使用过滤器创建阴影，但它位于顶部和左侧不存在的位置。我该如何解决？

<?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>

查看此代码笔：http://codepen.io/anon/pen/RWNjyG

Answer 1

将过滤器 x 和 y 属性设置为负数，例如“-20%”即

<?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>

请注意，如果您使 x、y 太小以至于影响 right/bottom 边缘，您可能必须增加过滤器 width/height。

顶部和左侧网站上的 svg 阴影不存在

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

svg

shadow