SVG: texte à l'intérieur du rect

180

Je veux afficher du texte dans SVG rect. C'est possible?

j'ai essayé

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

Mais ça ne marche pas.

text svg rect

— Jakub M.
source

5

duplication possible du texte d'insertion entre un rectangle dessiné en svg.

— Jonas

240

Ce n'est pas possible. Si vous souhaitez afficher du texte à l'intérieur d'un élément rect, vous devez les mettre tous les deux dans un groupe avec l'élément de texte venant après l'élément rect (pour qu'il apparaisse en haut).

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>

Développer l'extrait

— KeatsKelleher
source

20

Existe-t-il un moyen de ne pas avoir à régler manuellement la hauteur et la largeur sur le rect?

— George Mauer

Cela dépend de la situation et de ce que vous entendez par «manuellement». Vous pouvez écrire en JavaScript si vous le souhaitez (voir la réponse de Narendra ci-dessous)

— KeatsKelleher

9

En utilisant mes connaissances html - qui pourraient bien ne pas s'appliquer ici - il semble que l' gélément ait une taille implicite ici et j'aimerais que le rectangle se développe à sa taille.

— George Mauer

2

Le groupe s'adapte à son contenu et non l'inverse. Je pense que les éléments sont toujours relatifs au svg parent.

— shuji

l'élément de groupe est-il important ici?

— dmo

66

Par programmation en utilisant D3 :

body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')

— narendra kumar pradhan
source

11

Cela produit un balisage qui s'affiche comme OP le souhaite, mais cela ne fait pas ce qu'OP essaie de faire (ce qui n'est pas légal). Cela produit encore <svg><rect/><text/></svg>.

— Joshua Taylor

7

Javascript! = SVG. La question est étiquetée avec svg, texte et rect. Rien n'indique que l'utilisateur a accès à un langage de programmation. (Faire cette remarque depuis que je suis venu ici à la recherche d'une solution statique.)

— aioobe

6

Bien que ce soit vrai, cela ne concerne pas la question moi et apparemment beaucoup d'autres personnes sont venues ici pour D3

— cosmichero2025

1

Est-il possible d'ajuster automatiquement le rect à la largeur du texte

— Colin D

1

@Colin D C'est aussi ce que je recherche. Mais il semble impossible de s'attendre à ce que cela se fasse automatiquement. Au lieu de cela, nous devons le faire manuellement par nous-mêmes pour y parvenir. Il faudra quelques mesures de dimension (largeur et / ou hauteur) des deux éléments (rect et texte).

— Lex Soft

7

Vous pouvez utiliser Foreignobject pour plus de contrôle et placer du contenu HTML riche sur rect ou cercle

    <svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="250" height="250" fill="aquamarine" />
        <foreignobject x="0" y="0" width="250" height="250">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div>Here is a long text that runs more than one line and works as a paragraph</div>
                <br />
                <div>This is <u>UNDER LINE</u> one</div>
                <br />
                <div>This is <b>BOLD</b> one</div>
                <br />
                <div>This is <i>Italic</i> one</div>
            </body>
        </foreignobject>
    </svg>

Développer l'extrait

— e03050
source

Contrairement à l' textoption -tags-only, celle-ci a en fait placé le texte à l'intérieur du chemin au lieu de le cacher dans un espace invisible au-dessus! Les attributs xet yn'étaient pas nécessaires pour moi, mais le widthet l' heightétaient ou il était également introuvable!

— Matt Arnold le

4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(145,200,103);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(132,168,86);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="220" height="30" class="GradientBorder" fill="url(#grad1)" />
  <text x="60" y="20" font-family="Calibri" font-size="20" fill="white" >My Code , Your Achivement....... </text>
  </g>
</svg>

— narendra kumar pradhan
source

0

Afficher le texte par programme sur rect en utilisant Javascript de base

 var svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', 20);
        text.setAttribute('y', 50);
        text.setAttribute('width', 500);
        text.style.fill = 'red';
        text.style.fontFamily = 'Verdana';
        text.style.fontSize = '35';
        text.innerHTML = "Some text line";

        svg.appendChild(text);

        var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text2.setAttribute('x', 20);
        text2.setAttribute('y', 100);
        text2.setAttribute('width', 500);
        text2.style.fill = 'green';
        text2.style.fontFamily = 'Calibri';
        text2.style.fontSize = '35';
        text2.style.fontStyle = 'italic';
        text2.innerHTML = "Some italic line";

       
        svg.appendChild(text2);

        var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text3.setAttribute('x', 20);
        text3.setAttribute('y', 150);
        text3.setAttribute('width', 500);
        text3.style.fill = 'green';
        text3.style.fontFamily = 'Calibri';
        text3.style.fontSize = '35';
        text3.style.fontWeight = 700;
        text3.innerHTML = "Some bold line";

       
        svg.appendChild(text3);

    <svg width="510" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="510" height="250" fill="aquamarine" />
    </svg>

Développer l'extrait

— e03050
source