SVG 绘图在 chrome 上不起作用答案

【问题标题】：SVG Draw Not working On chromeSVG 绘图在 chrome 上不起作用
【发布时间】：2023-04-02 13:57:01
【问题描述】：

我正在编写一个代码来使用 SCSS 绘制 svg 单路径，它在 Firefox 上运行良好。但它不适用于谷歌浏览器。如果您有办法使其成为跨浏览器，我将不胜感激。这是我的 CSS：

svg path, svg polygon {
  fill-opacity: 0;
  stroke: #1F1F1F;
  stroke-width: 0.5;
  stroke-dasharray: 3319;
  stroke-dashoffset: 3319;
  animation-name: draw;
  animation-duration: 30s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;



 -webkit-fill-opacity: 0;
  -webkit-stroke: #1F1F1F;
  -webkit-stroke-width: 0.5;
  -webkit-stroke-dasharray: 3319;
  -webkit-stroke-dashoffset: 3319;
  -webkit-animation-name: draw;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;

}
/* line 38, ../sass/screen.scss */
svg #Shadows__x28_positive_x29_ path, svg #Shadows__x28_positive_x29_ polygon {
  animation-delay: 4s;
}

@keyframes draw {
  90% {
    stroke-dashoffset: 0;
    stroke-width: 0.5;
    fill-opacity: 0;
    -webkit-stroke-width: 0.5;
  }
  100% {
    stroke-width: 0;
    fill-opacity: 1;
    -webkit-stroke-width: 0
  }
}

谢谢大家。

【问题讨论】：

标签： css google-chrome animation svg draw

【解决方案1】：

我自己解决了。这是因为 @-webkit-keyframes 这里是 Resolved CSS:

    svg path, svg polygon {
  fill-opacity: 0;
  fill:asdasd #fff !important;
  stroke: #1F1F1F;
  stroke-width: 0.5;
  stroke-dasharray: 3319;
  stroke-dashoffset: 3319;
  animation-name: draw;
  animation-duration: 30s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;



 -webkit-fill-opacity: 0;
  -webkit-stroke: #1F1F1F;
  -webkit-stroke-width: 0.5;
  -webkit-stroke-dasharray: 3319;
  -webkit-stroke-dashoffset: 3319;
  -webkit-animation-name: draw;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;

}
/* line 38, ../sass/screen.scss */
svg #Shadows__x28_positive_x29_ path, svg #Shadows__x28_positive_x29_ polygon {
  animation-delay: 4s;
}

@keyframes draw {
  90% {
    stroke-dashoffset: 0;
    stroke-width: 0.5;
    fill-opacity: 0;
    -webkit-stroke-width: 0.5;
  }
  100% {
    stroke-width: 0;
    fill-opacity: 1;
    -webkit-stroke-width: 0
  }
}

@-webkit-keyframes draw {
  90% {
    stroke-dashoffset: 0;
    stroke-width: 0.5;
    fill-opacity: 0;
    -webkit-stroke-width: 0.5;
  }
  100% {
    stroke-width: 0;
    fill-opacity: 1;
    -webkit-stroke-width: 0
  }
}

而且效果很好:)

【讨论】：