SVG: текст внутри прямоугольника

180

Я хочу отобразить текст внутри SVG rect. Является ли это возможным?

Я попытался

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

Но это не работает.

text svg rect Якуб М.
источник

5

возможный дубликат вставляемого текста между прямоугольником, нарисованным в SVG.

Джонас

240

Это невозможно. Если вы хотите отобразить текст внутри прямоугольного элемента, вы должны поместить их обоих в группу, причем текстовый элемент следует после прямоугольного элемента (поэтому он появляется сверху).

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

Развернуть фрагмент

KeatsKelleher
источник

20

Есть ли способ не устанавливать вручную высоту и ширину в прямоугольнике?

Джордж Мауэр

Зависит от ситуации и того, что вы подразумеваете под «вручную». Вы можете

написать

9

Используя мои знания html - которые вполне могут здесь не применяться - кажется, что gэлемент имеет здесь неявный размер, и я бы хотел, чтобы прямоугольник расширился до его размера.

Джордж Мауэр

2

Группа подходит к своему содержанию не иначе. Я думаю, что элементы все еще относительно родительского SVG.

Шудзи

здесь важен элемент группы?

Dmo

66

Программно с использованием 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')

Нарендра Кумар Прадхан
источник

11

Это создает разметку, которая отображается так, как хочет OP, но она не выполняет то, что пытается сделать OP (что недопустимо). Это все еще производит <svg><rect/><text/></svg>.

Джошуа Тейлор

7

Javascript! = SVG. Вопрос помечен svg, text и rect. Ничто не указывает на то, что пользователь имеет доступ к языку программирования. (Делая это замечание, так как я пришел сюда в поисках статического решения.)

aioobe

6

Хотя это правда, это не относится ко мне и, по-видимому, многие другие люди пришли сюда на D3

cosmichero2025

1

Возможно ли установить прямоугольник по ширине текста

Колин Д.

1

@Colin D Это то, что я тоже ищу. Но кажется невозможным ожидать, что это будет сделано автоматически. Вместо этого мы должны сделать это вручную, чтобы достичь этого. Потребуются некоторые измерения размеров (ширина и / или высота) обоих элементов (прямоугольник и текст).

Lex Soft

7

Вы можете использовать иностранный объект для большего контроля и размещения богатого 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>

Развернуть фрагмент

e03050
источник

В отличие от textопции -tags-only, эта опция фактически помещает текст внутри пути, а не прячет его в невидимом пространстве над ним! В xи yатрибуты не нужны были для меня , но widthи heightбыли или же нигде не было видно!

Мэтт Арнольд

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>

Нарендра Кумар Прадхан
источник

0

Программно отображать текст поверх прямоугольника, используя базовый 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>

Развернуть фрагмент

e03050
источник

SVG: текст внутри прямоугольника

Ответы: