SVG: du texte à l'intérieur rect

Je veux afficher un texte à l'intérieur de SVG rect. Est-il 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 il ne fonctionne pas.

InformationsquelleAutor Jakub M. | 2011-07-17
  1. 213

    Ce n'est pas possible. Si vous voulez afficher du texte à l'intérieur d'un rect élément que vous devez les mettre tous les deux dans un groupe avec l'élément de texte à venir après le rect élément ( de sorte qu'il apparaît sur le dessus ).

    HTML:

    <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>

    • Est-il un moyen pour ne pas avoir à régler manuellement la hauteur et la largeur du rectangle?
    • Dépend de la situation et ce que vous entendez par "manuellement". Vous pouvez créer un script en JavaScript si vous le souhaitez (voir narendra la réponse ci-dessous)
    • À l'aide de mes connaissances en html, - qui pourrait bien ne pas s'appliquer ici -, il semble que la g élément implicite taille ici et j'aimerais le rectangle de l'étendre à sa taille.
    • Le groupe s'adapte à son contenu et non l'inverse. Je pense que les éléments sont toujours par rapport au parent svg.
    • est l'élément de groupe important ici?
    • Pas à tous. Cependant, il peut être utile lorsque l'on veut faire la mise en plis ou de transformation qui affecte tant rect et des éléments de texte en tant que groupe.

    InformationsquelleAutor KeatsKelleher
  2. 65

    Par programmation à l'aide 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')
    • Ce produit de la balise affiche comme l'OP veut, mais il ne fait pas ce que l'OP est en train de faire (ce qui n'est pas légal). Ce produit encore <svg><rect/><text/></svg>.
    • Javascript != SVG. La question est taggés avec svg, texte et rect. Rien n'indique que l'utilisateur a accès à un langage de programmation. (Fait cette remarque depuis que je suis ici à la recherche d'une solution statique.)
    • Alors que son vrai cela ne concerne pas la question moi et apparemment beaucoup d'autres gens sont venus ici pour D3
    • Est-il possible d'ajuster le rectangle de la largeur du texte
    • D c'est ce Que je suis à la recherche de trop. Mais Il semble impossible de s'attendre à ce qu'il fait automatiquement. Au lieu de cela, nous devons le faire manuellement par nous-mêmes pour y parvenir. Il aura besoin de quelques mesures de dimension (largeur et/ou hauteur) de deux éléments (rect et texte).
    InformationsquelleAutor narendra kumar pradhan
  3. 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>
    InformationsquelleAutor narendra kumar pradhan
  4. 1

    Vous pouvez utiliser foreignobject pour plus de contrôle et de placer riche contenu HTML sur le rectangle ou un cercle

    HTML:

        <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>

    SVG: du texte à l'intérieur rect

    InformationsquelleAutor e03050
  5. 0

    Par programmation de l'affichage du texte sur le rectangle à l'aide de code Javascript de base

    JS:

     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);

    HTML:

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

    SVG: du texte à l'intérieur rect

    InformationsquelleAutor e03050