Comment animer mon nom en SVG?

Je veux écrire mon nom en cursive SVGComment animer mon nom en SVG?

Jusqu'à présent, je l'ai fonctionné partiellement. Mais je veux que ça passe d'être vide à écrire mon nom. Jusqu'à présent, il suffit de réécrire dessus. Aussi, y a-t-il un moyen de changer la famille de polices?

Fiddle

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>practice</title> 
    <script type="text/javascript" src="script.js"> 

    </script> 

    <link href="test.scss" rel="stylesheet" /> 
    <link href="svg.css" rel="stylesheet" /> 
</head> 
<body> 
    <svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

     <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8 
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 
    C46.039,146.545,53.039,128.545,66.039,133.545z" /> 


     <text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text> 

    </svg> 
</body> 
</html>

CSS

.path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    -webkit-animation: dash 2s linear alternate infinite; 
} 

@-webkit-keyframes dash { 
    from { 
    stroke-dashoffset: 1000; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
}

Source

2014-04-28 onTheInternet

Mais je veux qu'il aille d'être vide pour écrire mon nom. Jusqu'à présent il juste réécrit dessus de lui.

Remplacez fill="#000000 par fill="none".

De plus, existe-t-il un moyen de changer la famille de polices?

Modifier l'attribut font-family.

<text class="path" xml:space="preserve" text-anchor="middle" 
     font-family="Arial" font-size="65" id="svg_1" y="330" x="528" 
     stroke-width="2" stroke="#000000" fill="none">joshua</text>

Source

2014-04-28 19:11:35

Cela a répondu à ma question. Cependant, ce n'est pas l'effet complètement désiré. Cela lui donne un contour mais pas un remplissage. Y a-t-il un moyen de le remplir aussi? – onTheInternet

Que diriez-vous de ceci?: Http://jsfiddle.net/58fb8/3/ –

amazing! Merci beaucoup! – onTheInternet

Comment animer mon nom en SVG?

Répondre

Questions connexes