feDropShadow 不会为路径元素创建阴影答案

【问题标题】：feDropShadow doesn't create shadow for path elementfeDropShadow 不会为路径元素创建阴影
【发布时间】：2018-09-03 22:25:38
【问题描述】：

我正在尝试为 path 元素创建阴影。我尝试为path 元素创建一个filter，但它不起作用。

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
   <g transform="translate(257.03125,190.08604431152344)">
   <defs>
      <filter id="shadow">
         <feDropShadow dx="4" dy="8" stdDeviation="4">                    </feDropShadow>
      </filter>
   </defs>
   <path d="M120 60 L120 0 L0 0 L0 60 L54 60 L60 66 66 60 Z" fill="#ffffff" stroke="#d2dbe9" filter="url(#shadow);" transform="translate(-60,-75)" style="opacity: 1;"></path>
   <text transform="translate(-30,-30)" style="font-size: 16px; font-weight: 500; line-height: 20px; fill: rgb(8, 40, 101); opacity: 1;">5670.581</text>
   <text transform="translate(-35,-55)" style="font-size: 10px; font-weight: 400; line-height: 20px; fill: rgb(74, 100, 142); opacity: 1;">2017-09-14 00:01</text>
</g>
</svg>

【问题讨论】：

我遇到了feDropShadow 的问题，但我不认为我只是在我的代码中添加了一个额外的分号。

标签： svg svg-filters

【解决方案1】：

删除无效的；在过滤器属性的末尾。

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
   <g transform="translate(257.03125,190.08604431152344)">
   <defs>
      <filter id="shadow">
         <feDropShadow dx="4" dy="8" stdDeviation="4">                    </feDropShadow>
      </filter>
   </defs>
   <path d="M120 60 L120 0 L0 0 L0 60 L54 60 L60 66 66 60 Z" fill="#ffffff" stroke="#d2dbe9" filter="url(#shadow)" transform="translate(-60,-75)" style="opacity: 1;"></path>
   <text transform="translate(-30,-30)" style="font-size: 16px; font-weight: 500; line-height: 20px; fill: rgb(8, 40, 101); opacity: 1;">5670.581</text>
   <text transform="translate(-35,-55)" style="font-size: 10px; font-weight: 400; line-height: 20px; fill: rgb(74, 100, 142); opacity: 1;">2017-09-14 00:01</text>
</g>
</svg>

【讨论】：