SVG Text belebtes Schriftstil

Question

Ich mag eine Animation machen, die

Ich habe einen Textpfad wie ein Google-Suchfeld sieht, wo das Wort in einer ‚fett‘ Schrift erscheint.

Ich würde das Wort mag so animieren, dass der erste Buchstabe ‚normalen‘ erscheint, dann ist die erste und die zweite, dann der erste, zweite und dritte usw.

Ist dies möglich mit einer svg Animation zu tun?

<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

Sie müssen die Buchstaben in separaten Tags innerhalb der textPath setzen, damit Sie sie einzeln mit Animationen ausrichten können.

Ich habe gerade den ersten Brief gemacht, aber Sie könnten dies auf alle Buchstaben erweitern, wenn Sie möchten.

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