SVG绘制不工作在铬

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-关键帧这里是解决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 
    } 
} 

，它工作正常:)