Cách nhận chú giải công cụ tiêu đề được tạo javascript cho SVG để hiển thị

Tôi đang cố gắng lấy chú giải công cụ cho phần tử SVG. (Kiểm tra dưới Firefox 16.0.2) Tôi cố gắng dụ nhỏ này và nó hoạt động tốt:Cách nhận chú giải công cụ tiêu đề được tạo javascript cho SVG để hiển thị

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect id="test" x="20" y="30" width="200" height="150"> 
    <title>Test tooltip</title> 
    </rect> 
</svg>

Nhưng, tôi cần phải tạo ra các tooltip từ javascript, như SVG cũng đang được tạo ra từ javascript. Vì vậy, cũng giống như một thử nghiệm đầu tiên, tôi đã cố gắng tạo ra chỉ là tooltip:

<script type="text/javascript"> 
function test(text) { 
    var title = document.createElement("title") 
    title.text = text 
    document.getElementById("test").appendChild(title) 
} 

</script> 
</head> 

<body onload="test('Test tooltip')"> 

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect id="test" x="20" y="30" width="200" height="150"> 
    </rect> 
</svg>

Khi tôi kiểm tra kết quả từ Firefox các đối tượng tiêu đề xuất hiện trùng với danh hiệu được tạo ra từ HTML/SVG, trừ rằng khi tôi chuột lên hình chữ nhật không có chú giải công cụ! Tôi đang làm gì sai?

Nguồn

2012-11-24 Michael

Phần tử tiêu đề phải ở trong không gian tên SVG, không phải là không gian tên mặc định. Do đó, bạn nên sử dụng createElementNS(). Ngoài ra, phần tử tiêu đề SVG không có thuộc tính text. Sử dụng textContent để thay thế. Vì vậy, điều này sẽ hoạt động:

<script type="text/javascript"> 
function test(text) { 
    var title = document.createElementNS("http://www.w3.org/2000/svg","title") 
    title.textContent = text 
    document.getElementById("test").appendChild(title) 
} 

</script> 
</head> 

<body onload="test('Test tooltip')"> 

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect id="test" x="20" y="30" width="200" height="150"> 
    </rect> 
</svg>

Nguồn

2012-11-24 22:19:41

Liệu nó có hoạt động nếu chúng tôi đặt 'title' bên trong' use' không? – codenamezero

@codenamezero Bạn có nghĩa là ' ', hoặc bạn có nghĩa là tiêu đề trong phần tử được tham chiếu bằng cách sử dụng không? Trong cả hai trường hợp: Chỉ cần thử và cảm thấy tự do để báo cáo lại về những phát hiện của bạn. –

Vâng, '' là cách phù hợp để làm điều đó vì tôi không nhận được tiêu đề để hiển thị? – codenamezero

Cách nhận chú giải công cụ tiêu đề được tạo javascript cho SVG để hiển thị

Trả lời

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