0

我正在相互旋转几个矩形，它们的颜色与使用 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;
}

js

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});

任何想法如何让它表现？

4

1 回答 1

0

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

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

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

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

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

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

于 2017-05-27T15:26:02.927 回答