Javascript Girl
  1. Javascript Girl
  3. Le texte peut-il être ajouté à un chemin SVG?
Intereting Posts
Comment tuer l'éclaboussement scintillant blanc au début de l'application iOS phonegap? Fonctionnement de l'objet JavaScript vs le tableau Méthode d'objet avec promesses ES6 / Bluebird Javascript – ajax – fermer session sur la fermeture du navigateur en JAVA Partage de la variable javascript globale d'une page avec un iframe dans cette page Comment utiliser ng-repeat avec la balise de la zone de la carte d'image? Accès aux éléments à l'intérieur de l'iframe et du corps Tags avec JavaScript HTTP POST en utilisant XHR avec codage de transfert fragmenté Comment puis-je accéder à la première clé d'un tableau 'associatif' en JavaScript? Chaîne Concat RTL avec chaîne LTR en javascript Node.js mongodb javascript confusion de portée Utilisation de l'adresse au lieu de la longitude et de la Latitude avec l'API Google Maps Comment attendre une promesse JavaScript à résoudre avant de reprendre la fonction? Comment puis-je effectuer le remplissage d'inondation avec le canevas HTML? JQuery Birthday Picker traite le rafraichissement de la forme

Le texte peut-il être ajouté à un chemin SVG?

Est-il possible d'ajouter du texte à un chemin svg, j'ai créé un triangle svg et je voudrais ajouter une lettre au centre de ceci mais je ne sais pas si cela est possible?

Oui. Voir la section 10.13 de la spécification SVG1.1 (intitulée "Texte sur un chemin d'accès") pour plus d'informations sur l'utilisation de l'élément textPath .

Résumé:

  1. Donnez votre chemin à un attribut id .
  2. Créer <textPath xlink:href="#pathid">My text here</textPath>

Voici un exemple directement de la spécification:
http://www.w3.org/TR/SVG/images/text/toap01.svg 

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap01 - simple text on a path</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go up, then we go down, then up again </textPath> </text> </svg>