Dev Faq
0
votes

Obtenez un chemin SVG si n'existe pas

J'essaie d'apprendre SVG pour faire quelque chose comme ça: https: / /css-tricks.com/svg-line-animation-works/ mais avec texte SVG.

Je fais cela pour avoir un SVG Bonjour code>: P> 

var path = document.querySelector('.path');
var length = path.getTotalLength();

2 commentaires

Où se trouve votre gettotallength (); fonction?

@dgknca c'est développeur.mozilla.org/en-us/docs / Web / API / SVGPathElement / ...

3 Réponses :

0
votes

Vous devez définir un chemin pour votre texte pour qu'il fonctionne. Et après avoir défini cela, vous devez lier le texte sur le chemin.

p> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 728 400">
<defs>
  <path id="path" 
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</defs>
<text font-family="monospace" font-size="20" fill="#1d1f20">
  <textPath id="text" xlink:href="#path">Hello</textPath>
</text>
</svg>

0 commentaires
0
votes

Non, vous ne pouvez pas obtenir un attribut d'un élément qui n'existe pas.

0 commentaires
1
votes

Vous devez avoir un élément de forme (généralement un ) afin d'utiliser cet effet d'animation de ligne.

Pour créer le chemin, utilisez un éditeur de vecteur, ajoutez votre texte, puis convertissez-le en chemin.

Presque tout éditeur de vecteur devrait fonctionner. Il y a des libres que vous pouvez utiliser, tels que l'inkscape.

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO