1

这有点难以解释，所以我将首先链接到演示问题的 CodePen，并要求您在 IE11 中打开它以查看问题，并要求您在另一个浏览器（例如 Chrome）中查看预期行为：https ://codepen.io/malcalevak/pen/OmPExK

它的要点是我正在尝试绘制 SVG 路径，并且我已经设置了 stroke-dasharray 以匹配路径的长度，然后将我的 SVG 偏移该长度（在示例中，我已经移动它，所以你会看到发生了什么）。然后我使用 Greensock 将 stroke-dashoffset 转换为 0（或示例中的 250）。起初，我以为它只是在 IE11 中被破坏了。我什至尝试手动更改 CSS 和内联值无效。但是，在改变了 stroke-dashoffset 之后，我看到了发生了什么。似乎 IE11 采用了原始的 stroke-dashoffset，并创建了一个永久的、不可移动的破折号！您可以移动破折号阵列，但它仅在原始破折号周围可见。所以在 CodePen 中，我有我的 CSS：

svg.line1 .line-draw {
  opacity: 0.17;
  fill: none;
  stroke: #ababaa;
  stroke-width: 6.2px;
  stroke-dasharray: 545;
  stroke-dashoffset: 500;
}

这个奇怪的“固定破折号”将我限制为只能在 500 和 545 之间制作动画......你可以在我的第二个补间中看到：

TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '250', ease: Power0.easeNone});
TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '520', ease: Power0.easeNone, delay: 1});

最初，您应该将线从 545 绘制到 500，将 1 秒的动画绘制到 250，然后再用 1 秒的动画将其缩短到 520。这在 Chrome 中有效，但在 IE11 中，我得到的只是一个微小的变化，之后延迟，从 500 到 520。

让我感到困惑的是，我在任何地方都找不到这个文档！

谁能解释发生了什么？

我会说我有一些替代解决方案来做我需要的事情，我只是想了解它为什么会发生，等等！

4

0 回答 0