SVG: tekst wewnątrz prostego

180

Chcę wyświetlić tekst w SVG rect. Czy to możliwe?

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.

text svg rect Jakub M.
źródło
5
możliwy duplikat wstawionego tekstu między prostokątem narysowanym w formacie svg.
Jonas,

Odpowiedzi:

240

To jest niemożliwe. Jeśli chcesz wyświetlić tekst w prostym elemencie, powinieneś umieścić je oba w grupie z elementem tekstowym znajdującym się po prostym elemencie (więc 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>
Rozwiń fragment

KeatsKelleher
źródło
20
Czy jest sposób, aby nie musieć ręcznie ustawiać wysokości i szerokości prostokąta?
George Mauer
Zależy od sytuacji i tego, co masz na myśli mówiąc „ręcznie”. Jeśli chcesz, możesz skrypty w JavaScript (patrz odpowiedź narendry poniżej)
KeatsKelleher,
9
Korzystając z mojej wiedzy html - która może nie mieć tutaj zastosowania - wygląda na to, że gelement ma tutaj niejawny rozmiar i chciałbym, aby prostokąt rozszerzył się do jego rozmiaru.
George Mauer
2
Grupa pasuje do jej treści, a nie odwrotnie. Myślę, że elementy są nadal powiązane z nadrzędnym svg.
shuji
czy element grupowy jest tutaj ważny?
dmo
66

Programowo przy użyciu 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
źródło
11
Tworzy znaczniki, które są wyświetlane tak, jak chce OP, ale nie robi tego, co próbuje zrobić OP (co nie jest legalne). To wciąż produkuje <svg><rect/><text/></svg>.
Joshua Taylor,
7
Javascript! = SVG. Pytanie jest oznaczone tagami svg, tekst i prostokąt. Nic nie wskazuje na to, że użytkownik ma dostęp do języka programowania. (Robię tę uwagę, odkąd przybyłem tutaj, szukając statycznego rozwiązania.)
aioobe
6
Chociaż to prawda, nie dotyczy to pytania mnie i podobno wielu innych ludzi przybyło tutaj na D3
cosmichero2025
1
Czy można autodopasować prostokąt do szerokości tekstu
Colin D
1
@Colin D Ja też tego szukam. Ale nie można oczekiwać, że zrobi się to automatycznie. Zamiast tego musimy to zrobić ręcznie, aby to osiągnąć. Będzie to wymagało pewnych pomiarów wymiarów (szerokości i / lub wysokości) obu elementów (prostokąta i tekstu).
Lex Soft
7

Możesz użyć obcego obiektu, aby uzyskać większą kontrolę i umieścić treść w formacie HTML nad prostokątem lub kółkiem

    <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>
Rozwiń fragment

wprowadź opis obrazu tutaj

e03050
źródło
W przeciwieństwie do opcji text-tags-only, ta faktycznie umieściła tekst w ścieżce zamiast ukrywać go w niewidocznej przestrzeni nad nią! Te xi yatrybuty nie były konieczne dla mnie, ale widthi heightbyły ani też nigdzie nie było widać!
Matt Arnold
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
źródło
0

Programowo wyświetlaj tekst nad prostokątem przy użyciu podstawowego języka JavaScript

 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>
Rozwiń fragment

wprowadź opis obrazu tutaj

e03050
źródło