混合混合模式：Android 上 SVG 动画期间的奇怪（临时）黑色背景答案

【问题标题】：Mix-blend-mode: weird (temp) black background during SVG animation on android混合混合模式：Android 上 SVG 动画期间的奇怪（临时）黑色背景
【发布时间】：2017-10-28 06:31:11
【问题描述】：

我正在相互旋转几个矩形，它们的颜色与使用 css 的混合混合模式交互。

在所有浏览器中都可以，但在 Android 上的 chrome 上，在旋转 svg 的矩形形状周围会产生黑色背景。一旦它就位，黑色背景就会消失。

笔：https://codepen.io/sashakevich/pen/YVMmZV

html:

<svg id="sl_logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.94 62.8"><g id="mark"><rect id="bar-1" class="cls-1" x="20.04" width="12.1" height="56" rx="3.24" ry="3.24"/><rect id="bar-2" class="cls-2" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(0.5, 0.87, -0.87, 0.5, 37.29, -9.59)"/><rect id="bar-3" class="cls-3" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(-0.5, 0.87, 0.87, 0.5, 15.5, -9.59)"/></g></svg>

css:

#bar-1, #bar-2, #bar-3 {
  mix-blend-mode:multiply;
}
#bar-1 {
  fill:#ed4237;
}
#bar-2 {
  fill:#29aae2;
}
#bar-3 {
  fill:#7ab642;
}

TweenMax.from("#bar-2", .35, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#bar-3", .7, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#letters", .7, {x:-40, opacity:0, transformOrigin:"left", delay:.4});

任何想法如何让它表现出来？

【问题讨论】：

标签： android animation blend gsap mix-blend-mode

【解决方案1】：

好的，2小时后我有一个解决方案....

如果你想走那条路，以下是行不通的：

不透明度：0；填充不透明度：1；
启用背景：累积；在父元素上
添加一个宽度和高度为 100% 的白色矩形
设置一些大的白色描边，设置无描边，也不使用描边不透明度。

做的工作是在页面某处创建另一个混合元素。甚至没有以任何方式 FFS 与 svg 交互！

.blend-fix {
  mix-blend-mode:multiply;
}

工作笔：https://codepen.io/sashakevich/pen/qmGBBL

【讨论】：