SVG for Web中的长阴影效果

Question

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

我对如何做到这一点的三点看法：

1. Hella详细的渐变映射，但有没有符合Web的方法从Illustrator导出到SVG？
2. 我不知道的Blend Object SVG Filter？
3. 使用像SNAP SVG这样的JS解决方案？

我的临时解决方案是从Illustrator中导出每个拼图块，其中75层SVG路径制作阴影（类似于带有文本阴影的长阴影：http://creative-punch.net/2014/03/long-shadow-buttons-css3-sass/）。这么多层的问题在于它真的会增加浏览器渲染的负担。 Here's an Example

我已经使用了 use 元素，但是使用所有75个阴影路径调用符号元素。

在原始的AI文件中，效果是使用混合模式创建的，在一些谷歌搜索之后，我找不到相当于......的SVG过滤器。但也许我错过了一些东西。

我试图用单一路径和渐变来计算如何做到这一点，但是由于“分层效应”，它不会是线性的，所以我必须真正将地狱映射出来并且不知道如果有一个简单的方法来做到这一点。

感谢您的帮助！

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

Answer 1

如果没有在阴影中为每个像素长度绘制阴影，或者只是直接绘制阴影，则无法在SVG中执行此操作。对于第一种情况，您可以使用具有减少填充不透明度的多个偏移形状，或使用多个阴影中的图层的过滤器来执行此操作。

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