SVG動畫文本字體樣式

我想打，看起來像一個谷歌搜索框SVG動畫文本字體樣式

我這裏所說的出現在「大膽」字體的文本路徑的動畫。

我想這樣的動畫字的第一個字母出現「常規」，然後在第一，第二，那麼第一，第二和第三等

這是可以做到與SVG動畫？

<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 

    <path id="path1"> 
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" /> 
    </path> 

// this text "types" 

    <text font-size="90" font-family="Montserrat" fill='black'> 
    <textPath xlink:href="#path1">Google is</textPath> 
    </text> 

// I want this text to animate the "font-style" 

    <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200"> 
    Google is gold 
    <animate attributeType="CSS" .... /> 
    </text>

來源

2016-04-28 user3821345

感謝。我需要給每個一個ID來做到這一點？我也可以通過在animate標籤中寫入font-style ='regular'並給每個人一個不同的begin =「？s」來設置動畫效果？ – user3821345

如果你想讓它們鏈接，在前一個 –

你需要放在單獨的標籤字母textPath內，因此您可以用動畫單獨對其進行定位。

我剛剛完成了第一個字母，但是如果您願意的話，您可以將其擴展爲所有字母。

<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 

 
    <path id="path1"> 
 
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" /> 
 
    </path> 
 

 
// this text "types" 
 

 
    <text font-size="90" font-family="Montserrat" fill='black'> 
 
    <textPath xlink:href="#path1">Google is</textPath> 
 
    </text> 
 

 
// I want this text to animate the "font-style" 
 

 
    <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200"> 
 
    <tspan>G<animate attributeType="CSS" attributeName="font-weight" from="700" to="100" dur="1s" begin="0s" repeatCount="indefinite"/></tspan>oogle is gold 
 
    
 
    </text>

來源

2016-04-28 08:28:02

的''.end事件上動畫每一個，這非常有幫助。我被困在鏈接動畫。這是我最好的嘗試，你可以看看嗎？ https://plnkr.co/edit/Yg3F37QtUUcdkoHlOIeN?p=info它應該像這樣工作：頂行 - 從0開始，每個字母應該一個接一個地出現（可見性隱藏到可見，然後保持）和底行 - 0全字顯示爲粗體，每個字母改變（字體權重：700到100一個接一個，然後按住）然後我希望整個序列重新開始。 – user3821345

你可以問另一個問題，並把你的代碼？ –

謝謝！ http://stackoverflow.com/questions/36933509/svg-animating-visibility-and-chaining – user3821345

SVG動畫文本字體樣式

回答

相關問題