Javascript 用于Web的SVG中的长阴影效应

基本上，我想知道是否有人对如何使用SVG有效地获得长阴影效果有什么想法：

关于如何实现这一点，我有三个想法：

Hella提供了详细的渐变贴图，但是否有一种与web兼容的方法从Illustrator导出到SVG

我不知道的混合对象SVG过滤器

JS解决方案，比如SNAP SVG

我的临时解决方案是从Illustrator导出每个拼图块，其中75层SVG路径形成阴影（类似于长阴影和文本阴影：）。如此多的层的问题是，它确实会加重浏览器渲染的负担

我已经使用了use元素，但是调用了一个包含所有75条阴影路径的symbol元素

在原始AI文件中，效果是使用混合模式创建的，在谷歌搜索之后，我找不到与…等效的SVG过滤器，但也许我遗漏了一些东西

我试着用一条路径和一个梯度来做这件事，但是由于“分层效应”，它不是线性的，所以我必须把它画出来，不知道是否有简单的方法

谢谢你的帮助

<code>for some reason I need this in order to link to codepen. Ignore</code>

---

在SVG中，如果不在阴影中按每像素长度绘制阴影，或者直接绘制阴影，就无法做到这一点。对于第一种情况，可以使用具有减少填充不透明度的多个偏移形状，或者使用在多个放置阴影中分层的过滤器来实现这一点

---

（Photoshop有一个挤出控件，可以为您自动执行此操作。）

下面是一个Inkscape示例；也许你也可以在Illustrator中这样做？顺便说一句，你可能会得到一个更好的答案