SVG動畫。繪製後填充路徑

我已經創建了一個svg文件，輪廓在頁面加載時被「繪製」。動畫完成後，我想填寫輪廓。SVG動畫。繪製後填充路徑

所以這就是我所做的。

有多條路徑。這裏是一個：

<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>

這是輪廓的動畫CSS：

@keyframes offset{ 
    to { 
     stroke-dashoffset: 0; 
    } 
} 

.b1{ 
    animation: offset 2s linear forwards; 
    stroke-dasharray: 324.774; 
    stroke-dashoffset: 324.774; 
}

直到這裏的一切都工作得很好。
兩秒鐘後動畫完成，現在我想填充它。
這是我因子評分我可能做到這一點：

@keyframes fill { 
    0% { 
     fill: white; 
     } 
    100% { 
     fill: black; 
     } 
     } 

     #fill { 
      animation-name: fill; 
      animation-duration: 2s; 
      animation-delay:2s; 
     }

的問題是，我媒體鏈接有一個id並分配給path
我試圖改變path的id與#fill一個class。

如果我這樣做，大綱動畫被覆蓋，它只是等待兩秒鐘。在兩秒鐘後，路徑被動畫填充。

我該如何做這項工作？我想要的是首先動畫輪廓，當它們完成時，形狀必須被填充。

Thnx。

來源

2016-11-18 Interactive

在動畫中，您可以擁有任意數量的關鍵幀。只需在0％到50％之間設置動畫路徑，然後在50％到100％之間設置動畫效果。

在這裏你去：

.b1 { 
 
    animation: stroke_fill 4s linear forwards; 
 
    stroke-dasharray: 324.774; 
 
    stroke-dashoffset: 324.774; 
 
} 
 
@keyframes stroke_fill { 
 
    0% { 
 
    fill: white; 
 
    } 
 
    50% { 
 
    fill: white; 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    fill: black; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg width="300" height="300" viewBox="0 0 300 300"> 
 
    <path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" 
 
    transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" /> 
 
</svg>

來源

2016-11-18 11:53:32

老兄......你是最好的。謝謝，也解釋 – Interactive

SVG動畫。繪製後填充路徑

回答

相關問題