【问题标题】:SVG stroke-dashoffset not working on safariSVG stroke-dashoffset 在 safari 上不起作用
【发布时间】:2023-03-27 18:11:01
【问题描述】:

即使我添加了 -webkit- 前缀,Stroke-dashoffset 也无法在 safari 上运行。请帮我。谢谢!....

这是我的示例代码....

#path1 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}
.path2 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}

@keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

【问题讨论】:

  • 帮助我们帮助您。请提供MCVE

标签: css svg safari


【解决方案1】:

Safari 不支持负的 stroke-dashoffset ......

【讨论】:

    【解决方案2】:

    如上所述,负值不适用于 stroke-dashoffset。如果您将值转换为正数,这应该可以(您也需要转换初始值):

    .path2 {
      stroke-dasharray: 1500;
    }
    
    @keyframes dash {
      from {
      stroke-dashoffset: 500;
      }
    }
    
    @-webkit-keyframes dash {
      from {
      stroke-dashoffset: 500;
      }
    }
    

    【讨论】:

      【解决方案3】:

      不是"Safari doesn't support negative `stroke-dashoffset",根据接受的答案。 Safari 实际上遵循规范。 Chrome、Firefox 等违反规范,可能是因为他们意识到规范定义不明确。

      这里是SVG spec's definition of stroke-dashoffset。需要注意的几点:

      1. 正的stroke-dashoffset 值不会使虚线向前移动,从路径的起点到路径的终点:它们向后移动。这是因为它被定义为“到路径开始的虚线图案的距离”,而不是您想象的“图案开始沿路径的距离”。
      2. stroke-dashoffset 值不会使虚线向后移动,确切地说。也就是说,从 > 0 跨越到

      简而言之,dashoffset 的工作方式与您预期的完全不同。并且您应该尽可能避免使用负值以避免混淆。

      解决方案

      解决这个问题的常用方法是删除负号并反转动画,这通常(可能总是?)应该会产生预期的效果:

      #path {
        stroke-dasharray: 500;
        animation: dash 2s ease reverse;
      }
      
      @keyframes dash {
        from {
          stroke-dashoffset: 500;
        }
      }
      

      讨论✝

      我认为这种混淆最终源于规范中这一行的歧义:

      where s is the sum of the dash array values.
      

      “破折号数组值”是指用户在属性中提供的值吗?或者它是否引用being processed 之后的值数组,奇数长度的数组被重复以产生偶数长度的数组(例如stroke-dasharray="10" 变为stroke-dasharray="10 10")。 Safari 似乎将其解释为前者,Chrome 和 Firefox 将其解释为后者。

      例如,对于stroke-dasharray="10",规范说stroke-dashoffset="-1" 看起来与stroke-dashoffset="9" 相同。但在 Chrome 和 Firefox 中,它看起来与 stroke-dashoffset="19" 相同。但是,如果您设置 stroke-dasharray="10 10",则规范的行为似乎与您希望的一样。

      【讨论】:

      • SVG 1.1 规范不包含此文本。如果您觉得可以改进,请使用 w3c 并进一步更改规范。如果 Chrome 和 Firefox 同意,让 Safari 修复它们的实现可能是最简单的。
      • 如果 Chrome 和 Firefox 改变了它们的实现并且有任何依赖它的内容,它就会中断。请与 w3c 一起解决这个问题,希望他们能够修复规范,并且 Safari 会更改以匹配 Chrome 和 Firefox。
      【解决方案4】:

      只需将stroke-dashoffset 设置为stroke-dasharray 的两倍值,我就能得到想要的结果

      第一步:

      第二步:

      【讨论】:

        【解决方案5】:

        我对否定的stroke-dashoffet 也有同样的问题。因此,我改用正值并翻转 SVG。

        在我的特殊情况下,我通过使用 transform:scaleX(-1) 翻转 SVG 来解决它。

        根据您的要求,翻转 SVG 可能会起作用。

        【讨论】:

          猜你喜欢
          • 2018-04-17
          • 2015-03-24
          • 2016-07-26
          • 1970-01-01
          • 2015-10-16
          • 1970-01-01
          • 1970-01-01
          • 2015-08-21
          • 2018-05-14
          相关资源
          最近更新 更多