Je veux afficher un texte à l'intérieur de SVG rect . Est-ce 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 cela ne fonctionne pas.
Cela n'est pas possible. Si vous voulez afficher du texte à l'intérieur d'un élément rectangle, vous devez les placer tous les deux dans un groupe, l'élément texte venant après l'élément rectangle (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>
Existe-t-il un moyen de ne pas avoir à définir manuellement la hauteur et la largeur du rectangle ?
Cela dépend de la situation et de ce que vous entendez par "manuellement". Vous pouvez script en JavaScript si vous le souhaitez (voir la réponse de narendra ci-dessous).
En utilisant mes connaissances en html - qui pourraient bien ne pas s'appliquer ici - il semble que le g a une taille implicite ici et je voudrais que le rectangle s'étende à sa taille.
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')
Cela produit un balisage qui affiche comme le veut le PO, mais il ne fait pas ce que le PO essaie de faire (ce qui n'est pas légal). Cela produit quand même <svg><rect/><text/></svg> .
Javascript != SVG. La question est étiquetée avec svg, text et rect. Rien n'indique que l'utilisateur a accès à un langage de programmation. (Je fais cette remarque car je suis venu ici à la recherche d'une solution statique).
Même s'il est vrai que cela n'a rien à voir avec la question, moi et apparemment beaucoup d'autres personnes sont venues ici pour le D3.
Vous pouvez utiliser objet étranger pour plus de contrôle et pour placer du contenu HTML riche sur un rectangle ou un 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>
<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>Affichage programmé d'un texte sur un rectangle à l'aide de 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>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
5 votes
Duplicata possible de insérer du texte entre un rectangle dessiné en svg.
0 votes
Cela répond-il à votre question ? Insérer du texte entre un rectangle dessiné en SVG