基本上我想知道是否有人对如何使用 SVG 有效地获得长阴影效果有任何想法：示例图像
我对这如何可能的三个想法：
Hella 详细的渐变图，但是有没有一种符合 Web 标准的方法可以将其从 Illustrator 导出到 SVG？我不知道的混合对象 SVG 过滤器？像 SNAP SVG 这样的 JS 解决方案？我的临时解决方案是从 Illustrator 中导出每个拼图，并使用 75 层 SVG 路径制作阴影。这么多层的问题在于它确实给浏览器渲染带来了负担。这是一个例子
我已经使用了 use 元素，但是调用了一个包含所有 75 个阴影路径的符号元素。
在原始 AI 文件中，效果是使用混合模式创建的，经过一番谷歌搜索后，我找不到等效于...的 SVG 过滤器，但也许我遗漏了一些东西。
我试图弄清楚如何使用单个路径和渐变来做到这一点，但是由于“分层效果”，它不会是线性的，所以我必须真正映射出它并且不知道是否有一个简单的方法来做到这一点。
谢谢你的帮助！
我看过 CSS 示例，其中使用了不同偏移量和颜色的多个阴影（通常使用box-shadow）。您可以在 SVG 中使用阴影来做同样的事情。
这是一个 CSS 示例： http: //www.sandbox.juan-i.com/longshadows/
有很多阴影对性能来说很糟糕，所以要小心。
在 Illustrator 中可以使用相同的阴影技术，因为 Illustrator 也可以有多个阴影。一个更好的选择可能是使用Blend ToolIllustrator 中的来创建许多中间形状，这对这样的事情很有好处。
更多信息：http ://design.tutsplus.com/tutorials/illustrators-blend-tool-a-comprehensive-guide--vector-551
这是一个使用Blend Tool.
坏消息是，在 SVG 中渲染的唯一方法是使用Object→Expand Appearance和Object→Expand将混合转换为单独的路径。
而且您在性能方面又回到了原点。
另一种选择是为长阴影元素使用位图图像。这样他们就会很好并且表现出色。
您可以使用 SVG 过滤器。我只是不确定它在速度方面是否更轻。拥有 75 条路径对计算机来说不算什么，但即使是几个过滤器也会让计算机瘫痪。（这是高度依赖于实现的困难。）
这是一种方式（10 px 长阴影）：
<filter id="Long_Shadow_10" >
<feConvolveMatrix order="20" in="SourceAlpha" result ="conv_out"
kernelMatrix="
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
" />
</filter>
现在你仍然需要用一个包围盒来掩盖它。不是很实用，但很有效。（您可能需要在模糊等之前进行扩张......）更大的内核列更长的阴影，更慢的性能。
图片 1：结果 fa 20 px 定向阴影。
最终选项使用由矢量掩盖的位图。这有点快，因为它不需要每次都重新计算。如果你用矢量掩盖它，即使是相当低分辨率的图像也足够了。