Question

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

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

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

1 个答案: