Làm cách nào để tạo "tiêu đề" (chú giải công cụ, cửa sổ bật lên, văn bản thay thế) trong CSS được sử dụng với SVG, không có JavaScript

Question

Thật dễ dàng để tạo cửa sổ bật lên với thuộc tính "tiêu đề" trong SVG. Nhưng làm thế nào để bạn đạt được hiệu quả tương tự với CSS.

Đây là minh họa tôi đang làm cho Wikimedia và tôi cố gắng để có hầu hết những thứ mà những người theo đuôi khác muốn sửa trong một bản định kiểu được nhúng, với các thuộc tính kiểu được nhóm theo chủ đề thực tế. Hầu hết các biên tập viên wikipedia là những người mù chữ máy tính, bạn không thể mong đợi họ săn lùng rất nhiều mã để sửa đổi và nếu họ phải thay đổi bất kỳ thứ gì ngoài các giá trị CSS đơn giản trong mã, thì có thể bạn sẽ gặp phải một mớ hỗn độn khó chịu . Nếu tôi làm cho điều này trở nên khó khăn cho bộ não kém của họ, thì sớm hay muộn ai đó sẽ làm cho tập tin không thể duy trì được bằng cách sử dụng Inkscape, Illustrator hoặc một số trình soạn thảo vector khác không kém kinh khủng.

Tôi có thể sử dụng Javascript, nhưng điều đó sẽ làm cho hình minh họa ít tiếp cận hơn và làm cho mã trở nên khó hiểu hơn đối với những người cần chỉnh sửa nó. Ngoài ra, một số tệp SVG sử dụng Javascript đã bị xóa khỏi Wikimedia vì điều đó, nhưng tôi không chắc đó có phải là một quy tắc tuyệt đối hay không.

---

Tôi vừa phát hiện khi tôi xác thực tệp của mình rằng thuộc tính tiêu đề trong SVG không được phép ở nơi tôi đã sử dụng, nhưng nó hoạt động với hầu hết các trình duyệt. Theo tiêu chuẩn, bạn nên sử dụng phần tử tiêu đề, nhưng điều đó dường như không hoạt động với bất kỳ trình duyệt nào. Ngoài ra, theo tiêu chuẩn, tôi có thể cung cấp thuộc tính title cho một phần tử kiểu, nhưng điều đó dường như không hoạt động với bất kỳ trình duyệt nào và nó sẽ yêu cầu tôi sử dụng 180 phần tử kiểu thay vì chỉ một (mã là được tạo ra bởi một kịch bản, do đó, nó không phải là một vấn đề đối với tôi để tạo ra chúng, nó chỉ là nó sẽ làm cho mã lớn hơn nhiều và khó hiểu hơn).

---

Hai "câu trả lời" mà tôi chưa nhận được cho câu hỏi tôi đã hỏi và thậm chí không hữu ích từ xa.

I không quan tâm nếu hình ảnh có thể chỉnh sửa được trong Inkscape. Inkscape là một công cụ tốt để tạo ra hình ảnh bitmap (ngay cả khi bạn phải chạy chúng thông qua một số chương trình khác để có được nén tốt hơn sau đó). Inkscape tạo các tệp SVG (hoặc bất kỳ tệp hình ảnh dựa trên vector nào dành cho đối tượng, các tệp hình ảnh dựa trên vector mà Inkscape tạo ra chỉ thực sự hữu ích với Inkscape), Inkscape thực sự là một công cụ rất nghèo để chọn tạo SVG hình ảnh được dùng như một sản phẩm cuối cùng; Sodipodi là một công cụ tốt cho điều đó, nhưng Inkscape không phải là Sodipodi, chỉ dựa trên Sodipodi (không may, phiên bản C cũ của Sodipodi không chạy tốt trên các hệ thống máy tính hiện đại và phiên bản C++ chưa bao giờ kết thúc). Tôi muốn làm cho hình ảnh của tôi dễ dàng chỉnh sửa bằng trình soạn thảo văn bản, do đó không có người dùng Wikipedia nào bị cám dỗ sử dụng Inkscape và làm cho tệp không thể quét được (và trong quá trình này tăng kích thước từ ít hơn 2 MB đến hơn 60 MB, nếu bạn lưu nó trong Inkscape dưới dạng hình ảnh SVG "chuẩn" (không phải lúc nào cũng cung cấp tệp tuân thủ chuẩn), thì định dạng tệp dựa trên svg có định dạng tệp lớn hơn).

Tôi không nghĩ rằng wikipedia cho phép javascript trong hình ảnh SVG, do đó, Javascript nằm ngoài câu hỏi.

Tôi đã biết cách tạo chú giải công cụ bằng javascript và hai phương pháp khác nhau để tạo chú giải công cụ trong SVG (nhưng không phải trong CSS được nhúng trong SVG).Lý do, ngoài câu hỏi đã được đề cập trong câu hỏi ban đầu, tôi không muốn sử dụng mã SVG cho chú giải công cụ là không có trình duyệt web hỗ trợ chuẩn, nhưng SVG-người xem thực hiện (nhưng không phải là tiêu chuẩn không chú giải công cụ làm việc với trình duyệt), vì vậy người nào đó sẽ tự sửa lỗi chú giải công cụ trong tệp (với trình chỉnh sửa văn bản), sẽ phải thay đổi văn bản ở hai vị trí khác nhau, rất có thể, theo thời gian, dẫn đến các chú giải công cụ khác nhau khi xem trong các trình duyệt/người xem khác nhau.

Answer 1

Theo như tôi có thể nói bạn không thể. Phần tử SVG có vẻ hoạt động kỳ quặc.

tôi nghĩ bạn có thể áp dụng một khái niệm tương tự như thế này sử dụng CSS3:

<style type="text/css"> 
acronym{ 
    position:relative 
} 
acronym:after { 
    content:attr(title); 
    position:absolute; 
    position:absolute; 
    left:100%; 
    margin-left:-10px; 
    top:-0.5em; 
    z-index:2; 
    padding:0.25em; 
    width:200px; 
    background-color:#f1f1f1; 
    text-align:center; 
    display:none; 
} 
acronym:hover:after{ 
    display:block; 
} 
</style> 

<acronym title="Keep It Simple Stupid"><a href="/">KISS</a></acronym> 

Nhưng :after Selector dường như không làm việc trên các yếu tố SVG

Tôi nghĩ rằng đặt cược tốt nhất của bạn là một jQuery kịch bản chạy trên $(document).ready() và thực hiện tất cả việc nâng hạng nặng cho bạn.

Answer 2

Tôi thường sử dụng thuộc tính (không hợp lệ) title = "" trên các phần tử SVG vì nó đơn giản và dường như hoạt động trong hầu hết các trình duyệt. Tôi hiểu yêu cầu của bạn là nó tuân thủ các tiêu chuẩn và mọi người có thể chỉnh sửa đồ họa trong InkScape một cách minh bạch và không phá vỡ các chú giải công cụ - vì điều này bạn sẽ phải sử dụng một số JavaScript. Dưới đây là ví dụ nhanh, tôi hy vọng bạn sẽ thấy hữu ích, nó sẽ đính kèm sự kiện di chuột vào mỗi phụ huynh trực tiếp của phần tử và tải nội dung văn bản trong chú giải công cụ được hiển thị bên cạnh con trỏ. Điều này trong khi vẫn giữ được khả năng tương thích của InkScape và khả năng sử dụng hộp thoại "Object Properties" của InkScape để đặt văn bản chú giải công cụ.

Với ví dụ SVG sau:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <title>Main Title</title> 
    <g id="group1"> 
    <title>Title One</title> 
    <circle cx="120" cy="60" r="40" fill="#993333" /> 
    </g> 
    <g id="group2"> 
    <title>Title Two</title> 
    <circle cx="60" cy="60" r="40" fill="#339933" /> 
    <g id="group3"> 
     <circle cx="180" cy="60" r="40" fill="#333399" /> 
     <title>Title Three</title> 
    </g> 
    </g> 
</svg> 

Đầu tiên thêm một yếu tố tooltip giả:

<g id="toolTip" transform="translate(0,0)"> 
    <rect width="150" height="25" /> 
    <text x="5" y="18"> </text> 
</g> 

Give it một số phong cách:

<style> 
g#toolTip { 
visibility: hidden; 
} 
    g#toolTip rect { 
    fill: #FFCC00; 
    } 
    g#toolTip text { 
    font-size: 16px; 
    } 
</style> 

Sau đó chèn một rảy JS:

<script> 
    <![CDATA[ 
    var toolTip = document.getElementById('toolTip'); 
    var titles = document.getElementsByTagName('title'); 
    for (var i = 0; i < titles.length; i++) { 
    titles.item(i).parentNode.addEventListener('mouseover', function(e) { 
     showTip(this,xy(e)); 
    }, true); 
    titles.item(i).parentNode.addEventListener('mouseout', function() { 
     hideTip(); 
    }, true); 
    } 
    function showTip(element,pos) { 
    var text = element.getElementsByTagName('title')[0].childNodes[0].nodeValue; 
    toolTip.getElementsByTagName('text')[0].childNodes[0].nodeValue = text; 
    toolTip.setAttribute('transform', 'translate(' + pos + ')'); 
    toolTip.style.visibility = 'visible'; 
    } 
    function hideTip() { 
    toolTip.style.visibility = 'hidden'; 
    } 
    function xy(e) { 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
     return [e.pageX,e.pageY] 
    } else if (e.clientX || e.clientY) { 
     return [e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,e.clientY + document.body.scrollTop + document.documentElement.scrollTop]; 
    } 
    return [0,0] 
    } 
    ]]> 
</script> 

Cần lưu ý: Khối JS cần phải ở cuối tệp SVG - và nếu bạn sử dụng trình soạn thảo XML trong InkScape (hiếm) nó sẽ làm hỏng tập lệnh (điều này có thể được giải quyết bằng cách chuyển sang tệp JS bên ngoài) và thêm một số phát hiện sẵn sàng DOM).

Phương pháp này cũng hy vọng rằng a) tất cả < tiêu đề > yếu tố nên được trả lại như tooltips và b) rằng chỉ có bao giờ một < tiêu đề > yếu tố mỗi cha mẹ (kỳ quặc, spec SVG cho phép nhiều) - ở đây tôi đã khó mã hóa nó để chỉ đơn giản là sử dụng các phần tử con > đầu tiên gặp phải, bỏ qua bất kỳ những cái tiếp theo.

Lưu ý: chức năng xy (e) chỉ cần thiết để có được những mâu thuẫn trong trình duyệt khi nói đến vị trí con trỏ - bạn có thể không cần đến nó, hoặc bạn có thể muốn tự cuộn.

Phần thưởng: Điều này có thể dễ dàng được mở rộng để sử dụng phần tử <desc>, nếu bạn cần chú giải công cụ phức tạp hơn với các bit văn bản dài hơn.