Cách thêm chú giải công cụ vào đồ họa svg?

Tôi có một loạt các hình chữ nhật svg (sử dụng D3.js) và tôi muốn hiển thị một thông báo khi di chuột qua, thông báo sẽ được bao quanh bởi một hộp hoạt động dưới dạng nền. Cả hai nên được hoàn toàn phù hợp với nhau và hình chữ nhật (trên đầu và trung tâm). Cách tốt nhất để làm việc này là gì?Cách thêm chú giải công cụ vào đồ họa svg?

Tôi đã thử thêm văn bản svg bằng thuộc tính "x", "y", "chiều rộng" và "chiều cao", sau đó thêm tiền tố svg. Vấn đề là điểm tham chiếu cho văn bản nằm ở giữa (vì tôi muốn nó được căn giữa, tôi sử dụng text-anchor: middle), nhưng đối với hình chữ nhật, nó là tọa độ trên cùng bên trái, cộng thêm một chút lề xung quanh văn bản. của một cơn đau.

Tùy chọn khác đang sử dụng div html, điều này rất hay vì tôi có thể thêm văn bản và đệm trực tiếp nhưng tôi không biết cách lấy tọa độ tuyệt đối cho mỗi hình chữ nhật. Có cách nào để làm việc này không?

Nguồn

2012-05-17 nachocab

Nếu không có cách nào khác, tôi đoán – nachocab

Có phải đó là một vấn đề , bằng cách sử dụng đánh dấu cho những gì nó được thiết kế cho? – Phrogz

Nó chỉ là nó không có vẻ đẹp, nhưng tôi đánh giá cao câu trả lời của bạn – nachocab

Bạn có thể sử dụng phần tử tiêu đề như được chỉ định trong Phrogz. Ngoài ra còn có một số tooltips tốt như Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (mà có thể được sử dụng để thay thế tất cả các yếu tố tiêu đề), nvd3 Bob Monteverde của jQuery hoặc thậm chí tooltip của Twitter từ họ Bootstrap http://twitter.github.com/bootstrap/

Nguồn

2012-05-17 21:06:19 paxRoman

Bạn có thể sử dụng chỉ đơn giản là SVG <title> element và trình duyệt mặc định hiển thị nó truyền tải không? (Lưu ý: đây là không giống như thuộc tính title bạn có thể sử dụng trên div/img/nhịp trong html, nó cần phải được một đứa trẻ yếu tố tên title)

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

Ngoài ra, nếu bạn thực sự muốn hiển thị HTML trong SVG của mình, bạn có thể nhúng HTML trực tiếp:

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
} 
 

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

… nhưng sau đó bạn cần JS để bật và tắt màn hình. Như được hiển thị ở trên, một cách để làm cho nhãn xuất hiện ở đúng vị trí là quấn trực tiếp và HTML trong cùng một <g> để sắp xếp chúng lại với nhau.

Để sử dụng JS để tìm vị trí của phần tử SVG trên màn hình, bạn có thể sử dụng getBoundingClientRect(), ví dụ: http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Nguồn

2012-05-17 21:06:16 Phrogz

Hoạt động tốt để tôi chèn tiêu đề vào phần tử svg! –

Câu trả lời hay. Nhưng xin lưu ý rằng 'externalObject' [không được hỗ trợ trong Internet Explorer] (https://caniuse.com/#search=foreignObject) –

Cách thêm chú giải công cụ vào đồ họa svg?

Trả lời

Các vấn đề liên quan