网络环境中的颜色混合选项（相乘）？答案

【问题标题】：Color blending options (Multiply) in a web context?网络环境中的颜色混合选项（相乘）？
【发布时间】：2015-03-04 11:55:32
【问题描述】：

我们有一位客户创建了动画图形（使用 AI 和 After Effects）。

该图形本质上是 3 个重叠的甜甜圈（由于“明显原因”，现在无法发布）

每个甜甜圈都不是完美的圆形，而是以某种独特的方式扭曲
每个甜甜圈在不同的弦上都有不同的线性颜色渐变
每个甜甜圈在动画中以略微不同的速度旋转、缩放和跳动。

他们的图形是使用 Illustrator 构建的（每个甜甜圈是 1 层），然后在 After Effects 中制作动画。重叠甜甜圈的结果是一个很好的颜色乘法效果，每个甜甜圈的各个部分重叠。

我目前正在尝试将其移植到网络上，但在颜色混合和乘法方面遇到了重大问题。

我尝试过的一些东西。

将 AI 文件导出为 SVG 并使用 RaphaelJS 制作动画
直接从 AI 导出路径并使用 RaphaelJS 进行渲染
获取导出的 SVG 并破解它以使用 FeImage 和 FeBlend 过滤器

以上所有内容都没有像我预期的那样呈现，并且通过一点谷歌搜索 SVG 颜色混合，并且 SVG 规范通常没有在大多数浏览器中完全实现。

我也尝试将单个图层导出为 PNG，然后使用 CSS 完成：

background: url('PNGs/L1.png') center center, url('PNGs/L2.png') center center, url('PNGs/L3.png') center center; background-repeat: no-repeat; background-blend-mode: multiply;

这有点让我朝着正确的方向前进，但是：它似乎在 IE 中完全被破坏了，我无法让它在每个 PNG 都是 3 个不同 div 之一上的 BG 图像的情况下工作（我需要这样做为了单独为 div 设置动画）

我只是因为这个问题而找错了树，还是有一个神奇的 js 图形库可以解决我所有的问题？

【问题讨论】：

嗨，你可能会发现最好在堆栈溢出时问这个
干杯克里斯，将交叉发布到 SO。
这篇文章应该在堆栈溢出中。
如果没有更多信息，我不确定我们如何为您提供帮助。 “我有一个图形，我不能给你看，它不起作用”并没有给我们太多的继续。您至少可以发布某种简化的 SVG 版本吗？
这支笔可能对你有帮助：codepen.io/mullany/pen/KwzBYZ

标签： css animation svg adobe-illustrator blending

【解决方案1】：

CSS 混合模式仅在最新的浏览器中可用，所以如果颜色效果是必不可少的，那并不是一个真正的选择。唯一具有良好浏览器支持的颜色倍增效果是 SVG 过滤器 (<feBlend>)。

然而，使用过滤器的一个困难是，目前没有像样的浏览器支持在过滤器中组合来自同一文件的多个元素。没有一个浏览器支持 SVG1.1 enable-background 将一个元素与其后面的元素混合的选项（它将被新的 CSS 混合规范中的 isolation 功能取代）。 <feImage> 过滤器元素可用于将 SVG 的片段导入另一个元素的过滤器，但 Firefox 不支持这种使用（它只允许将其用于完整的图像文件）。

所以，你的策略是：

为三个彩色甜甜圈中的每一个创建单独的文件（SVG 或 PNG）。
创建一个将传递给过滤器的空容器元素。确保将过滤器区域设置为输出图形的正确尺寸。
在过滤器中，使用三个<feImage> 元素来加载组件图形。将x、y、width、height参数设置为三个图形的初始重叠位置。
使用两个 <feBlend> 操作组合 <feImage> 结果
使用 JavaScript 或 SMIL 为 <feImage> 的参数设置动画，并为 IE 提供 JavaScript 备份。

限制：

过滤器对像素图形进行操作，除了设置导入图像的位置和大小之外，您无法进行任何转换。如果您需要其他动画，则需要在源图像文件中进行。
您正在加载四个单独的文件。可能需要查看数据 URI 以减少总加载时间。