代码之家 › 专栏 › 技术社区 › Matt

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

svg-filters svg

0

Matt · 技术社区 · 7 年前

我想给一个 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>

1 回复 | 直到 7 年前

1

2

Robert Longson 7 年前

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