Web 上下文中的颜色混合选项（乘法）？
Color blending options (Multiply) in a web context?
我们有一位客户创建了动画图形（使用 AI 和 After Effects）。
该图形本质上是 3 个重叠的甜甜圈（现在 post "obvious reasons" 不能）
- 每个甜甜圈都不是完美的圆形，并且以某种独特的方式扭曲
- 每个甜甜圈在不同的和弦上都有不同的线性颜色渐变
- 每个甜甜圈在动画中以略微不同的速度旋转、缩放和脉动。
他们的图形是使用 Illustrator 构建的（每个甜甜圈都是 1 层），然后在 After Effects 中制作动画。甜甜圈重叠的结果是一个很好的颜色倍增效果，每个甜甜圈的各个部分重叠。
我目前正在尝试将其移植到网络上，但在颜色混合和乘法方面遇到了重大问题。
我试过的东西。
- 将 AI 文件导出为 SVG 并使用 RaphaelJS 制作动画
- 直接从 AI 中导出路径并使用 RaphaelJS 渲染它们
- 获取导出的 SVG 并破解它以使用 FeImage 和 FeBlend 过滤器
以上所有内容都没有像我预期的那样呈现，并且通过谷歌搜索 SVG 颜色混合，SVG 规范通常没有在大多数浏览器中完全实现。
我也试过将 individual 图层导出为 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 个不同的 1 个上的 BG 图像 div s（为了在div中为div设置动画，我需要这样做）
我是不是找错人了，还是说有一个神奇的 js 图形库可以解决我所有的问题？
CSS 混合模式仅在最新的浏览器中可用，因此如果颜色效果是必不可少的，那不是一个真正的选择。唯一在任何地方都受到浏览器支持的颜色倍增效果是 SVG 滤镜 (<feBlend>)。
然而，使用过滤器的一个困难是，目前浏览器不支持在过滤器中组合来自同一文件的多个元素。 None 的浏览器支持 SVG1.1 enable-background 选项，用于将一个元素与其后面的元素混合（它将被新 CSS 混合中的 isolation 功能取代规范）。 <feImage> 过滤器元素可用于将 SVG 的片段导入另一个元素的过滤器，但 Firefox 不支持这种用法（只允许它用于完整的图像文件）。
所以，你的策略是：
为三个彩色甜甜圈中的每一个创建单独的文件（SVG 或 PNG）。
创建一个将传递给过滤器的空容器元素。确保将过滤区域设置为输出图形的正确尺寸。
在过滤器中，使用三个 <feImage> 元素加载组件图形。设置x,y,width,height参数为三个图形的初始重叠位置
使用两个 <feBlend> 操作合并 <feImage> 结果
使用 JavaScript 或带有 JavaScript IE 备份的 SMIL 对 <feImage> 的参数进行动画处理。
限制：
滤镜对像素图形进行操作，除了设置导入图像的位置和大小外，您不能进行任何变换。如果您需要其他动画，您需要在源图像文件中进行。
您正在加载四个单独的文件。可能需要查看数据 URI 以减少总加载时间。
如果您不介意只支持最新的浏览器（其他人看到的是形状而不是颜色倍增效果），您应该能够通过 CSS 在任何 [=25] 上混合来做到这一点=]
SVG 元素，带有动画变换
具有 CSS 背景的多个 HTML 图像或元素（动画 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
我们有一位客户创建了动画图形（使用 AI 和 After Effects）。
该图形本质上是 3 个重叠的甜甜圈（现在 post "obvious reasons" 不能）
- 每个甜甜圈都不是完美的圆形，并且以某种独特的方式扭曲
- 每个甜甜圈在不同的和弦上都有不同的线性颜色渐变
- 每个甜甜圈在动画中以略微不同的速度旋转、缩放和脉动。
他们的图形是使用 Illustrator 构建的（每个甜甜圈都是 1 层），然后在 After Effects 中制作动画。甜甜圈重叠的结果是一个很好的颜色倍增效果，每个甜甜圈的各个部分重叠。
我目前正在尝试将其移植到网络上，但在颜色混合和乘法方面遇到了重大问题。
我试过的东西。
- 将 AI 文件导出为 SVG 并使用 RaphaelJS 制作动画
- 直接从 AI 中导出路径并使用 RaphaelJS 渲染它们
- 获取导出的 SVG 并破解它以使用 FeImage 和 FeBlend 过滤器
以上所有内容都没有像我预期的那样呈现，并且通过谷歌搜索 SVG 颜色混合，SVG 规范通常没有在大多数浏览器中完全实现。
我也试过将 individual 图层导出为 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 个不同的 1 个上的 BG 图像 div s（为了在div中为div设置动画，我需要这样做）
我是不是找错人了，还是说有一个神奇的 js 图形库可以解决我所有的问题？
CSS 混合模式仅在最新的浏览器中可用，因此如果颜色效果是必不可少的，那不是一个真正的选择。唯一在任何地方都受到浏览器支持的颜色倍增效果是 SVG 滤镜 (<feBlend>)。
然而，使用过滤器的一个困难是，目前浏览器不支持在过滤器中组合来自同一文件的多个元素。 None 的浏览器支持 SVG1.1 enable-background 选项，用于将一个元素与其后面的元素混合（它将被新 CSS 混合中的 isolation 功能取代规范）。 <feImage> 过滤器元素可用于将 SVG 的片段导入另一个元素的过滤器，但 Firefox 不支持这种用法（只允许它用于完整的图像文件）。
所以，你的策略是：
为三个彩色甜甜圈中的每一个创建单独的文件（SVG 或 PNG）。
创建一个将传递给过滤器的空容器元素。确保将过滤区域设置为输出图形的正确尺寸。
在过滤器中，使用三个
<feImage>元素加载组件图形。设置x,y,width,height参数为三个图形的初始重叠位置使用两个
<feBlend>操作合并<feImage>结果使用 JavaScript 或带有 JavaScript IE 备份的 SMIL 对
<feImage>的参数进行动画处理。
限制：
滤镜对像素图形进行操作，除了设置导入图像的位置和大小外，您不能进行任何变换。如果您需要其他动画，您需要在源图像文件中进行。
您正在加载四个单独的文件。可能需要查看数据 URI 以减少总加载时间。
如果您不介意只支持最新的浏览器（其他人看到的是形状而不是颜色倍增效果），您应该能够通过 CSS 在任何 [=25] 上混合来做到这一点=]
SVG 元素，带有动画变换
具有 CSS 背景的多个 HTML 图像或元素（动画 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