Question

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

它的要点是我正在尝试绘制SVG路径，并且我设置了stroke-dasharray以匹配路径的长度，然后将我的SVG偏移该长度（在示例中，我已经改变了，所以你看到了一些事情发生了）。然后我使用Greensock将stroke-dashoffset转换为0（或样本中的250）。起初，我认为它在IE11中被破坏了。我甚至尝试手动更改CSS和内联值无效。但是，在转换了冲程后，我看到了发生的事情。似乎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的线条，1s的动画画面下降到250，然后再用1s动画将它缩短到520.这适用于Chrome，但在IE11中，我得到的是一个很小的转变延迟后，为500至520。

让我感到困惑的是，我无法在任何地方找到这些文件！

有人可以解释发生了什么吗？

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

在IE11中，SVG stroke-dashoffset创建“固定”破折号

0 个答案: