我们有一位客户创建了动画图片（使用AI＆amp; After Effects）。
图形基本上是3个重叠的甜甜圈（由于“显而易见的原因”，现在无法发布）
他们的图形是使用Illustrator构建的（每个圆圈是1层），然后在After Effects中动画。重叠甜甜圈的结果是一个很好的色彩倍增效果，每个甜甜圈的各个部分重叠。
我正在尝试将其移植到网络上，并遇到有关色彩混合和问题的重大问题。乘法的东西。
我尝试过的事情。
上述所有内容都没有像我期望的那样呈现，而且通过一点点google搜索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图形库可以修复我所有的困境？
答案 0 :(得分：2)
CSS混合模式仅在最新的浏览器中可用，因此如果颜色效果是必不可少的，那么这不是一个真正的选择。任何适合浏览器支持的唯一颜色乘法效果是SVG过滤器（<feBlend>）。
然而，使用过滤器的一个难点是目前没有合适的浏览器支持来组合过滤器中同一文件的多个元素。没有一个浏览器支持SVG1.1 enable-background选项，用于将一个元素与其后面的元素混合（它将被新的CSS混合规范中的isolation特征替换）。 <feImage>过滤器元素可用于将SVG的片段导入到另一个元素的过滤器中，但Firefox不支持该用法（仅允许将其用于完整的图像文件）。
所以，你的策略是：
为您的三个彩色甜甜圈创建单独的文件（SVG或PNG）。
创建一个将传递给过滤器的空容器元素。确保将过滤器区域设置为输出图形的正确尺寸。
在过滤器中，使用三个<feImage>元素来加载组件图形。将x，y，width和height参数设置为三个图形的初始重叠位置。
使用两个<feImage>操作合并<feBlend>个结果
使用JavaScript或SMIL以及IE的JavaScript备份为<feImage>的参数设置动画。
限制：
过滤器对像素图形进行操作，除了设置导入图像的位置和大小之外，您无法进行任何变换。如果您需要其他动画，则需要在源图像文件中执行这些动画。
您正在加载四个单独的文件。可能希望查看数据URI以减少总加载时间。
如果您只支持最新的浏览器（其他人看到形状而不是颜色倍增效果），那么您应该能够在任何
上使用CSS Blending来做到这一点。SVG元素，带有动画转换
多个HTML图片或具有CSS背景的元素（动画CSS转换属性，可能回退到动画绝对位置属性）
包含多个CSS背景图片的单个HTML元素，使用background-position属性（CSS或JavaScript）进行动画处理。这里的动画比较棘手，因为所有图层的位置都是通过一个CSS属性来控制的。它也不会像转换一样进行硬件加速，可以使用视频卡组合的独立层来实现。
但是，请注意两个不同的混合模式属性：
background-blend-mode控制元素上的分层背景如何相互融合。它可以是背景中每个图像的值列表。它对单独元素（HTML或SVG）之间的混合没有影响。
mix-blend-mode控制给定元素如何混合到后面的内容中，受isolation属性的限制（将所有子内容与其他网页混合隔离开来） ）或其他创建堆叠上下文的属性。
More on CSS Blending
caniuse.com browser support for CSS Blending