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

，它工作正常:)