用于 Web 的 SVG 中的长阴影效果

Question

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

我对如何实现这一点的三个想法：

1. Hella 详细的渐变图，但是否有一种符合 Web 标准的方法可以将其从 Illustrator 导出为 SVG？
2. 我不知道的混合对象 SVG 过滤器？
3. 使用 SNAP SVG 之类的 JS 解决方案？

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

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

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

我试图弄清楚如何使用单个路径和渐变来完成它，但由于“分层效果”，它不会是线性的，所以我必须真正映射出它并且不知道如果有一种简单的方法可以做到这一点。

感谢您的帮助！

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

Answer 1

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

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