SVGテキストアニメーションのフォントスタイル

Question

私は言葉が「太字」フォントで表示されたテキストパスを持っているGoogle検索ボックス

のように見えるアニメーションを作りたいです。

私は、最初の文字は「通常の」表示され、その後、第一および第二など、その後、第一、第二および第三

は、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> 

Answer 1

あなたがアニメーションで個別にそれらを標的にすることができるよう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>