Comment placer et centrer du texte dans un rectangle SVG

Question

J'ai le texte suivant rectangle...

<rect x="0px" y="0px" width="60px" height="20px"/>

Je voudrais centrer le mot "Fiction" à l'intérieur d'elle. Pour les autres rectangles, ne svg word wrap à rester à l'intérieur? Je n'arrive pas à trouver quoi que ce soit à propos de l'insertion de texte dans des formes qui sont centrés horizontalement et verticalement, et le retour. Aussi, le texte ne peut pas quitter le rectangle.

En regardant les http://www.w3.org/TR/SVG/text.html#TextElement exemple ne vous aide pas, puisque le texte de l'élément x et y sont différents de l'rectangle x et y de. Il ne semble pas être la largeur et la hauteur pour les éléments de texte. Je ne suis pas sûr de l'maths ici.

(Mon tableau html est tout simplement pas aller travailler.)

Answer 1

SVG 1.2 Minuscule ajouté l'habillage du texte, mais la plupart des implémentations de SVG que vous trouverez dans le navigateur (à l'exception de l'Opéra) n'ont pas mis en œuvre cette fonctionnalité. Il est généralement jusqu'à vous, le développeur, pour positionner le texte manuellement.

Le SVG 1.1 spécification fournit un bon aperçu de cette limitation, et les solutions possibles pour les surmonter:

Chaque ‘texte' élément provoque une seule chaîne de texte à rendre. SVG effectue pas de gestion automatique de coupure de ligne ou le mot de l'emballage. Pour obtenir l'effet de plusieurs lignes de texte, utilisez l'une des les méthodes suivantes:

• L'auteur ou de création de package besoins pour pré-calculer les sauts de ligne et l'utilisation plusieurs ‘texte' éléments (un pour chaque ligne de texte).
• L'auteur ou de création paquet a besoin de calculer la ligne les pauses et l'utilisation d'un seul texte de l'élément avec un ou plusieurs ‘tspan' enfant éléments avec des valeurs appropriées pour les attributs ‘x', ‘y', ‘dx' et ‘dy' à établir de nouvelles positions de départ pour ceux des personnages qui, au départ, de nouvelles lignes. (Cette approche permet à l'utilisateur de texte la sélection de plusieurs lignes de texte -- voir la sélection de Texte et opérations de presse-papiers.)
• Express le texte à être rendus dans un autre XML espace de noms tels que XHTML [XHTML] intégré inline dans un ‘foreignObject' élément. (Note: le sémantique exacte de cette approche sont pas totalement définie à ce moment.)

http://www.w3.org/TR/SVG11/text.html#Introduction

Comme un primitif, de l'habillage de texte peuvent être simulées à l'aide de la dy attribut et tspan éléments, et comme mentionné dans la spec, certains outils peuvent automatiser cela. Par exemple, dans Inkscape, sélectionnez la forme que vous voulez, et le texte que vous voulez, et l'utilisation du Texte -> Flux dans l'Image. Cela vous permettra d'écrire votre texte, avec du papier d'emballage, qui se terminera en fonction des limites de la forme. Aussi, assurez-vous que vous suivez ces instructions pour dire Inkscape pour maintenir la compatibilité avec le format SVG 1.1: http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3F

En outre, il existe des bibliothèques JavaScript qui peut être utilisé de manière dynamique automatiser l'habillage du texte: http://www.carto.net/papers/svg/textFlow/

Il est intéressant de noter CSVG solution à l'habillage d'une forme à un élément de texte (voir, par exemple, leur "touche" par exemple), mais il est important de mentionner que leur mise en œuvre n'est pas utilisable dans un navigateur: http://www.csse.monash.edu.au/~clm/csvg/about.html

Je suis citant ce parce que j'ai développé une CSVG inspirés de la bibliothèque qui vous permet de faire des choses similaires et fonctionne dans les navigateurs web, bien que je n'ai pas sorti encore.