nội tuyến svg trong html - làm thế nào để làm suy giảm một cách duyên dáng?

Xem mã bên dưới - Tôi đang cố gắng đưa svg nội tuyến vào trang web của mình. Tôi đang theo dõi a neat suggestion để sử dụng phần tử chuyển đổi svg để nó giảm xuống một cách duyên dáng trên các trình duyệt cũ hơn. Ý tưởng là các trình duyệt hỗ trợ svg sử dụng phần tử đầu tiên trong khối chuyển đổi; những người không bỏ qua tất cả các thẻ svg và chỉ hiển thị img được chôn trong phần tử thứ hai (nghĩa là thẻ ngoại khóa) của khối chuyển đổi.nội tuyến svg trong html - làm thế nào để làm suy giảm một cách duyên dáng?

Nó hoạt động thực sự tốt ... ngoại trừ svg của tôi (là bản nhạc) nhất thiết phải bao gồm các phần tử văn bản và chúng được hiển thị (cũng như các ngoại lệ) bởi các trình duyệt cũ hơn.

Trớ trêu thay, thật dễ dàng để giải quyết vấn đề này trong IE8 và dưới đây bằng cách sử dụng các nhận xét có điều kiện.

Đối với các trình duyệt cũ hơn, tôi có một javascript xung quanh bên trong ngoại vi xác định lại lớp của văn bản svg. Nó hoạt động ... nhưng nó giống như một hack thực sự.

Có cách nào tốt hơn để làm điều này (javascript tốt hơn, giải pháp css, một cách khác để làm văn bản svg ...)?

Dù sao đây là xương trần của mã:

<html> 
<head> 

<!-- this deals with elements using the svgtext class in old IE browsers --> 
<!--[if lte IE 8]> 
<style type="text/css"> 
.svgtext { display: none; } 
</style> 
<![endif]--> 
<style type="text/css"> 
.donotdisplay { display: none; } 
</style> 

</head> 
<body> 

<svg ...> 
<switch> 
<g> 
<!-- the svg goes here --> 
<text class="svgtext">this gets rendered unless I deal with it</text> 
</g> 
<foreignObject ...> 
<script type="text/javascript"> 
window.onload=function(){ 
    var inputs=document.getElementsByTagName('text'); 
    for(i=0;i<inputs.length;i++){ 
    inputs[i].className='donotdisplay'; 
    } 
} 
</script> 
<!-- the replacement img tag goes here --> 
</foreignObject> 
</switch> 
</svg> 

</body> 
</html>

Nguồn

2012-05-06 Chris Walshaw

Tôi muốn nhìn vào RaphaelJS, trong trường hợp đó chuẩn bị sẵn để phát hiện tính năng - hoặc có thể Modernizr. Không được sử dụng, nhưng cả hai đều đáng để đi. – halfer

Các trình duyệt cũ nào khác ngoài IE8 không hỗ trợ SVG mà bạn đang cố gắng hỗ trợ? –

@halfer - Modernizr sẽ thêm lớp 'svg' hoặc' no-svg' vào toàn bộ tài liệu, có thể được kiểm tra bằng mã hoặc bằng bộ chọn CSS. Nó sẽ không tự động khắc phục vấn đề, nhưng nó làm cho nó khá dễ dàng để kiểm tra. –

Dưới đây là một ý tưởng cho các trình duyệt khác hơn IE8 và trước đó cho một CSS- (mà cần Shiv JS dựa để nhận ra các yếu tố text.) giải pháp duy nhất,

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test Case</title> 

<!--[if lte IE 8]> 
    <script type="text/javascript"> 
     document.createElement("text"); 
    </script> 
<![endif]--> 

    <style type="text/css"> 
     @namespace svg "http://www.w3.org/2000/svg"; 
     text { display: none; } 
     svg|text { display: inline; } 
    </style> 
    </head> 
    <body> 

    <svg> 
     <switch> 
     <g> 
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
      <text x="20" y="120">this gets rendered unless I deal with it</text> 
     </g> 
     <foreignObject> 
      <p>Use an SVG capable browser</p> 
     </foreignObject> 
     </switch> 
    </svg> 

    </body> 
</html>

ý tưởng ở đây là trình duyệt hỗ trợ SVG nội tuyến, làm như vậy bằng cách đặt các yếu tố SVG vào "http://www.w3.org/2000/svg" namespace, mà có thể sau đó được giải quyết trong css.

Đã thử nghiệm trong Firefox 12, IE9, Chrome 18 Opera 11.6, hiển thị SVG và Firefox 3.6 và Safari 5.0 hiển thị hình ảnh thu nhỏ.

JSFiddle tại http://jsfiddle.net/rGjKs/

Nguồn

2012-05-06 11:15:28 Alohci

cảm ơn! Cũng hoạt động trên một trình duyệt Android cũ hơn cho thấy sự sụp đổ. Thư viện Modernizr trông thú vị nhưng tôi thích giải pháp này rất nhiều vì nó đơn giản hơn nhiều và tránh javascript. –

Ký tự ống '|' có nghĩa là gì, trong 'svg | text'? – Sathvik

@Sathvik - Nó chỉ là ký tự phân cách giữa tiền tố không gian tên và tên địa phương của phần tử. Ít hơn hoặc tương đương với ký tự ":" (dấu hai chấm) trong XML. – Alohci

nội tuyến svg trong html - làm thế nào để làm suy giảm một cách duyên dáng?

Trả lời

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