SVG : rect 안의 텍스트

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

— 야 aku M.
소스

5

svg로 그려진 사각형 사이

— Jonas

240

이건 불가능 해. rect 요소 안에 텍스트를 표시하려면 rect 요소 뒤에 오는 text 요소가있는 그룹에 모두 배치해야합니다 (따라서 맨 위에 나타남).

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

스 니펫 확장

— 키츠
소스

20

rect에 높이와 너비를 수동으로 설정할 필요가없는 방법이 있습니까?

— George Mauer

상황과 '수동'의 의미에 따라 다릅니다. 원한다면 JavaScript로 스크립트를 작성할 수 있습니다 (아래 narendra 's answer 참조)

— KeatsKelleher

9

여기에 적용되지 않을 수있는 내 HTML 지식을 사용하면 g 요소가 여기에 암시 적 크기를 갖는 사각형을 크기로 확장하고 싶습니다.

— George Mauer

2

그룹은 다른 방식이 아닌 내용에 적합합니다. 요소가 여전히 부모 svg와 관련이 있다고 생각합니다.

— shuji

여기서 그룹 요소가 중요합니까?

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

— Joshua Taylor

7

자바 스크립트! = SVG. 질문은 svg, text 및 rect로 태그됩니다. 아무것도 사용자가 프로그래밍 언어에 액세스 할 수 있음을 나타냅니다. (정적 솔루션을 찾기 위해 여기에 온 이후로이 발언을했습니다.)

— aioobe

6

그것이 사실이지만 이것은 질문에 관한 것이 아니며 분명히 많은 다른 사람들이 D3를 위해 이곳에 왔습니다

— cosmichero2025

1

텍스트의 너비에 rect를 자동 맞춤하는 것이 가능합니까

— Colin D

1

@Colin D 저도 찾고 있습니다. 그러나 자동으로 기대되는 것은 불가능합니다. 대신, 우리는 그것을 달성하기 위해 스스로 수동으로해야합니다. 두 요소 (직사 및 문자)의 치수 (너비 및 / 또는 높이)를 측정해야합니다.

— Lex Soft

7

외부 객체 를 사용 하여 더 많은 제어를 수행하고 rect 또는 circle 위에 풍부한 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

기본 자바 스크립트를 사용하여 프로그래밍 방식으로 텍스트를 rect 위에 표시

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