css - Web 上下文中的颜色混合选项(乘法)？

Question

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

该图片基本上是 3 个重叠的 donut (由于“显而易见的原因”现在不能发布)

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

他们的图形是使用 Illustrator 构建的(每个圆环都是一层)，然后在 After Effects 中制作动画。重叠 donut 的结果是一个很好的颜色倍增效果，每个 donut 的各个部分重叠。

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

我尝试过的东西。

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

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

• 我还尝试将各个图层导出为 PNG，然后使用 CSS 完成:

  背景:url('PNGs/L1.png') center center,
url('PNGs/L2.png') 中心中心，
url('PNGs/L3.png') 中心中心；
背景重复:不重复；
背景混合模式:相乘；

这有点让我朝着正确的方向前进但是:它在 IE 中似乎完全被破坏了，而且我无法让它工作，因为每个 PNG 是 3 个不同 div 之一的 BG 图像(我需要这样做为了分别为 div 设置动画)

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

Answer 1

CSS 混合模式仅在最新的浏览器中可用，因此如果颜色效果是必不可少的，那不是一个真正的选择。唯一在任何地方都受到浏览器支持的颜色倍增效果是 SVG 滤镜 (<feBlend>)。

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

因此，您的策略是:

• 为三个彩色 donut 中的每一个创建单独的文件(SVG 或 PNG)。

• 创建一个将传递给过滤器的空容器元素。确保将过滤区域设置为输出图形的正确尺寸。

• 在过滤器中，使用三个 <feImage>元素来加载你的组件图形。将x、y、width、height参数设置为三个图形的初始重叠位置。

• 合并<feImage>结果使用两个 <feBlend>操作

• 为 <feImage> 的参数设置动画将 JavaScript 或 SMIL 与 JavaScript 备份用于 IE。

限制:

• 过滤器对像素图形进行操作，除了设置导入图像的位置和大小外，您不能进行任何转换。如果您需要其他动画，则需要在源图像文件中进行。

• 您正在加载四个单独的文件。可能需要查看数据 URI 以减少总加载时间。

More on SVG Filters

---

如果您只支持最新的浏览器(其他人看到的是形状而不是颜色倍增效果)，您应该能够在任何

• 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