如何在SVG中制作非投影？

Question

我需要使用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是由代码生成的，因此解决方案如：“使用最大形状的路径来制作阴影”将无效。我无法确定哪条路会产生阴影，或阴影是否是多条重叠路径的结果，形成与任何路径不匹配的阴影。

我正在考虑把我所有的路径都放在一个小组中，并以某种方式制作它的影子，但我不知道该怎么做。

Answer 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)"/>

＆lt; use＆gt;用于偏移滤波器结果。该过滤器用于提取＆lt; g＆gt;的α信道。元素（你拥有的形状）。您可能希望使用feColorMatrix或类似内容而不是feOffset来调整您希望阴影的黑色程度。

Answer 2

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

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

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