如何在 SVG 中制作非投影？答案

【问题标题】：How to make non drop shadows in SVG?如何在 SVG 中制作非投影？
【发布时间】：2014-05-02 20:33:56
【问题描述】：

我需要使用 SVG 制作以下带有阴影的形状：

我有以下形状的 SVG：

<svg style="overflow:visible; margin-left:136px; margin-top:59px; " height="188" width="212">
    <path d=" M 105.3,0  C 47.2,0 0,41.8 0,93.3  C 0,144.9 47.2,186.7 105.3,186.7  C 163.5,186.7 210.7,144.9 210.7,93.3  C 210.7,41.8 163.5,0 105.3,0  L 105.3,0 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; "></path>
    <path d=" M 71.6,55.7  C 65.5,55.7 60.6,60 60.6,65.4  C 60.6,70.8 65.5,75.1 71.6,75.1  C 77.6,75.1 82.6,70.8 82.6,65.4  C 82.6,60 77.6,55.7 71.6,55.7  L 71.6,55.7 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
    <path d=" M 139.1,55.7  C 133,55.7 128.1,60 128.1,65.4  C 128.1,70.8 133,75.1 139.1,75.1  C 145.1,75.1 150.1,70.8 150.1,65.4  C 150.1,60 145.1,55.7 139.1,55.7  L 139.1,55.7 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
    <path d=" M 48.4,134  C 86.3,157.2 124.3,157.2 162.3,134 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
</svg>

但是现在我无法为我的形状制作阴影？我知道如何为单个形状制作阴影，但在这种情况下，我的形状是许多路径的组合。即使我可以使用滤镜为形状制作阴影，但如何使用滤镜使阴影看起来像椭圆？

注意：我的 SVG 是由代码生成的，因此诸如“使用最大形状的路径制作阴影”之类的解决方案将不起作用。我无法确定哪条路径会产生阴影，或者阴影是否是多个重叠路径形成的阴影与任何路径都不匹配的结果。

我正在考虑将我的所有路径放在一个组中，并以某种方式对其进行阴影处理，但我不知道该怎么做。

【问题讨论】：

许多游戏作弊，只是在项目下方放置一个模糊的椭圆作为阴影。您也许可以使用 css 创建阴影，然后对其进行转换……从未尝试过，但听起来很有趣。
@Ruskin 我考虑过这样做，但它对我不起作用。阅读我的问题中的注释。
不幸的是 svg 没有区域联合方法，或者我建议使用这些方法。您可能必须以编程方式复制形状，然后将所有路径和填充设置为灰色，然后将其转换为阴影......类似于 nixkuroi 的答案
@Ruskin 我担心有人会这么说。以编程方式复制形状是可行的，但设置svg 元素的边界以免截断新形状将是一个挑战。并非所有浏览器都尊重overflow:visible; 属性。
您可以将 svg 设置为缩放以适应容器...不知道如何，但肯定有一位大师在播客上谈论它...5by5.tv/webahead/67

标签： html css svg

【解决方案1】：

你可以让它像这样工作：

<defs>
  <filter id="getalpha">
    <feOffset in="SourceAlpha"/>
  </filter>
</defs>
<g id="shapes">
  ... your shapes ...
</g>
<use xlink:href="#shapes" 
     transform="... your translate/skew here ..." 
     filter="url(#getalpha)"/>

用于倾斜过滤结果。该过滤器用于提取元素的 alpha 通道（您拥有的形状）。您可能想使用feColorMatrix 或类似名称而不是feOffset 来调整您希望阴影的黑色程度。

【讨论】：

【解决方案2】：

首先，我建议去掉除微笑之外的所有路径，并用圆圈替换它们。它们更易于阅读且使用效率更高。

为了实现您想要的阴影，您应该可以将此代码粘贴到路径下方的底部。

<ellipse cx="-50" cy="230" rx="100" ry="50"
style="fill:lightgrey;stroke:lightgrey;stroke-width:2" 
transform="rotate(-15 0 0)" />

【讨论】：

如果你想让阴影有 alpha，你会遇到重叠的问题。