Svg với hình ảnh bên trong không hiển thị trong safari

Question

Bên trong trang web của tôi, tôi đang nhúng một vài svgs. Tất cả dường như chỉ hoạt động tốt trong Chrome, Firefox, IE (9+) và trong Safari. Howvere ngay khi có hình ảnh được bao gồm trong svg, safari không hiển thị hình ảnh.

Dựa trên những chủ đề tương tự trước đó tôi đã thử như sau:

SVG <image> elements not displaying in Safari - kèm theo

<use> 

thẻ như thế này <use></use>

SVG Image dosen't appear in Safari - Tôi không tìm thấy điều này rất hữu ích, gây ra điều này là xóa aprt của svg.

Not able to render SVG image in Safari - Thêm

<meta http-equiv="Content-Type" content="application/xhtml+xml"> trong tiêu đề.

Và hơn thế nữa, tôi không thực sự biết những gì khác để thử. Có lẽ một điều thú vị hơn cần lưu ý là bên trong trang của tôi, hình ảnh không được hiển thị, nhưng tôi có thể mở tập tin svg trong safari (chỉ tập tin) và nó sẽ được renderd một cách chính xác. Hơn nữa, sau khi nó được mở trong trình duyệt dưới dạng tệp, nó cũng hiển thị bên trong trang. Và tôi đã nhúng svg vào trang bằng thẻ img.

<img src="mysvg.svg" class="center-block"/> 

Đây là svg của tôi:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> 
<g> 
    <defs> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414  "/> 
    </defs> 
    <clipPath id="SVGID_2_"> 
     <use xlink:href="#SVGID_1_" overflow="visible"></use> 
    </clipPath> 
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)"> 
     <g id="DSC_x5F_0112-2.psd_1_" enable-background="new "> 

       <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov 
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei 
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> 
      </image> 
     </g> 
    </g> 
</g> 
<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

Tôi đã giảm chuỗi hình ảnh base64, để rút ngắn mã. Svg đầy đủ có thể được tìm thấy here.

CẬP NHẬT: Chỉ cần rõ ràng, svg hiển thị trong trình duyệt (safari) nhưng hình ảnh bị thiếu (tôi có thể thấy chỉ đường viền).

Answer 1

Dường như câu trả lời từ câu hỏi này hoạt động: What could make Safari skip clip-path AND mask with SVG?. Xem hướng dẫn trong liên kết từ câu trả lời.

Bạn phải tạo lại đường dẫn clip của mình để hiển thị đường dẫn. Và thẻ </clippath> không được đẩy sau thẻ </image>.

Đây là ít mã đã thay đổi (liên kết đến hình ảnh của tôi chèn, do đó bạn sẽ phải thay đổi nó):

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" > 
<g> 
    <clipPath id="SVGID_2_"> 
     <!--use xlink:href="#SVGID_1_" overflow="visible"></use--> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" /> 
    </clipPath> 

    <defs> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/> 
    </defs> 
</g> 

<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> 
</image> 

<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

Answer 2

Vì vậy, Anto Jurković chỉ ra, có một số vấn đề được biết đến với Safari và clipPath. Những gì Safari thích là nếu bạn không định nghĩa đa giác nhưng đặt nó thẳng vào clippPath. Ngoài ra, bạn phải nhóm riêng clipPath.

Nhưng tôi vẫn không thể nhận được svg để hiển thị hình ảnh nếu tôi sử dụng thẻ img cho svg - <img src="svg"/>. Vì vậy, cuối cùng tôi đã embeded nó như thế này:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> 
<g> 
    <clipPath id="SVGID_2_"> 
     <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414  "/> 
    </clipPath> 
</g> 
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k="> 
</image> 
<g> 
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 
     L164,1.415L1.414,164.002z"/> 
</g> 
</svg> 

tôi có thể xác nhận rằng điều này ám một cách chính xác trong safari di động (trên ipad và iphone, cửa sổ safari và mac safari - phiên bản mới nhất).

Vì vậy, để tổng hợp nó ... Tôi có svgs này trong tệp html riêng biệt và hiển thị chúng khi cần.

Answer 3

This solution hoạt động đối với tôi khi hiển thị hình ảnh SVG được nhúng trong Safari.

thay

<img src="image.svg">

với

<object data="image.svg" type="image/svg+xml"></object>

Answer 4

Tôi chạy vào vấn đề này mà tôi đã sử dụng Ajax để tải spritesheet svg vào trang. Nếu tôi đã có trên trang trước khi spritesheet được tải, nó sẽ thất bại và sẽ không giải quyết một khi spritesheet là avaialble. Bất kỳ thêm vào dom sau khi spritesheet đã được nạp là tốt. Tôi đã phải trì hoãn việc đưa các vật phẩm vào trong dom cho đến sau khi spritesheet tải xong.

Chỉ ảnh hưởng đến iOS này. Tất cả các trình duyệt khác không quan tâm đến thứ tự.

Answer 5

Dường như lỗi WebKit này chịu trách nhiệm về các vấn đề: https://bugs.webkit.org/show_bug.cgi?id=99677

Cách giải quyết chúng tôi sử dụng trong ứng dụng của chúng tôi là phải có một kịch bản mà tìm tất cả img yếu tố hiển thị hình ảnh SVG và thêm ẩn object yếu tố tải cùng SVGs (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>).

Lý do hoạt động là thẻ object tải đúng các hình ảnh được nhúng vào bộ nhớ cache hình ảnh để chúng hiển thị trong các SVG được tải bằng cách sử dụng các thẻ img.

Ưu điểm của phương pháp này là hình ảnh vẫn được hiển thị bằng cách sử dụng thẻ img để có thể áp dụng cách khắc phục (và sau này được xóa sạch khi các trình duyệt được vá) mà không ảnh hưởng đến phần còn lại của ứng dụng/trang web.

Bất lợi là tạo thêm một thẻ object cho mỗi hình ảnh SVG.