SVG: văn bản bên trong trực tràng

180

Tôi muốn hiển thị một số văn bản bên trong SVG rect. Có thể không?

Tôi đã thử

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

Nhưng nó không hoạt động.

text svg rect

— Jakub M
nguồn

5

có thể trùng lặp văn bản chèn giữa một hình chữ nhật được vẽ bằng svg.

— Jonas

240

Điều này là không thể. Nếu bạn muốn hiển thị văn bản bên trong một phần tử chỉnh lưu, bạn nên đặt cả hai trong một nhóm với phần tử văn bản xuất hiện sau phần tử chỉnh lưu (để nó xuất hiện ở trên cùng).

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

Mở rộng đoạn trích

— KeatsKelleher
nguồn

20

Có cách nào để không phải tự đặt chiều cao và chiều rộng trên trực tràng không?

— George Mauer

Phụ thuộc vào tình huống và ý của bạn là 'thủ công'. Bạn có thể viết mã bằng JavaScript nếu bạn thích (xem câu trả lời của narendra bên dưới)

— KeatsKelleher

9

Sử dụng kiến thức html của tôi - có thể không áp dụng ở đây - có vẻ như gphần tử có kích thước ẩn ở đây và tôi muốn hình chữ nhật mở rộng thành kích thước của nó.

— George Mauer

2

Nhóm phù hợp với nội dung của nó không phải theo cách khác. Tôi nghĩ rằng các yếu tố vẫn còn liên quan đến các phụ huynh.

— shuji

yếu tố nhóm có quan trọng ở đây không?

— dmo

66

Lập trình sử dụng 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
nguồn

11

Điều này tạo ra đánh dấu hiển thị như OP muốn, nhưng nó không làm những gì OP đang cố gắng làm (điều này không hợp pháp). Điều này vẫn sản xuất <svg><rect/><text/></svg>.

— Joshua Taylor

7

Javascript! = SVG. Câu hỏi được gắn thẻ với Svg, văn bản và trực tràng. Không có gì chỉ ra rằng người dùng có quyền truy cập vào một ngôn ngữ lập trình. (Nhận xét này kể từ khi tôi đến đây tìm kiếm một giải pháp tĩnh.)

— aioobe

6

Mặc dù sự thật nó không liên quan đến câu hỏi của tôi và rõ ràng nhiều người khác đã đến đây vì D3

— cosmichero2025

1

Có thể tự động chỉnh sửa trực tiếp theo chiều rộng của văn bản

— Colin D

1

@Colin D Đó là những gì tôi đang tìm kiếm quá. Nhưng có vẻ như không thể mong đợi nó được thực hiện tự động. Thay vào đó, chúng ta phải tự làm một cách thủ công để đạt được điều đó. Nó sẽ cần một số phép đo kích thước (chiều rộng và / hoặc chiều cao) của cả hai yếu tố (trực tràng và văn bản).

— Lex Soft

7

Bạn có thể sử dụng Foreignobject để kiểm soát nhiều hơn và đặt nội dung HTML phong phú trên trực tràng hoặc vòng tròn

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

Mở rộng đoạn trích

— e03050
nguồn

Không giống như texttùy chọn chỉ -tags, cái này thực sự đặt văn bản bên trong đường dẫn thay vì ẩn nó trong một không gian vô hình phía trên nó! Các thuộc tính xvà ykhông cần thiết đối với tôi nhưng widthvà heightcũng không thể thấy được!

— 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
nguồn

0

Lập trình hiển thị văn bản qua chỉnh lưu bằng Javascript cơ bản

 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>

Mở rộng đoạn trích

— e03050
nguồn