Question

我正在编写一个代码来使用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
  }
}

谢谢大家。

Answer 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
  }
}

它工作正常:)

SVG Draw不工作在chrome上

1 个答案: