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

Question

我正在尝试为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>

Answer 1

删除 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>