Chcę wyświetlić tekst wewnątrz SVG rect. Czy to możliwe?SVG: tekst wewnątrz rect
Próbowałem
<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>
Ale to nie działa.
To nie jest możliwe. Jeśli chcesz wyświetlić tekst wewnątrz prostego elementu, powinieneś umieścić je w grupie z elementem tekstowym nadchodzącym za elementem rect (tak, że pojawia się na górze).
<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>Czy istnieje sposób na ręczne ustawianie wysokości i szerokości prostokąta? –
Zależy od sytuacji i tego, co masz na myśli przez "ręcznie". Możesz skrypty w JavaScript, jeśli chcesz (patrz odpowiedź narendra poniżej) – KeatsKelleher
Korzystanie z mojej wiedzy HTML - co może nie mieć zastosowania tutaj - wydaje się, że element 'g' ma domyślny rozmiar tutaj i chciałbym, aby prostokąt się rozwinął do jego wielkości. –
programowo pomocą D3: [. Wkładki tekstu między prostokąta zasysanego SVG]
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')
Powoduje to utworzenie znaczników * wyświetlanych * tak, jak PO chce, ale nie robi tego, co OP robi (co nie jest legalne). To nadal powoduje '' '' '' '' '' 2 2 2............................................................. –
Javascript! = SVG. Pytanie jest oznaczone tagami svg, text i rect. Nic nie wskazuje, że użytkownik ma dostęp do języka programowania. (Robiąc tę uwagę, odkąd tu przybyłem, szukałem statycznego rozwiązania.) – aioobe
<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>
możliwe duplikat (http://stackoverflow.com/questions/5449899/insert-text-between-a-rectangle-drawn-in-svg) – Jonas