12
tôi đã nhân rộng vấn đề của tôi trong ví dụ đơn giản sau đâySVG định danh đoạn được trao đổi trong Safari khi phục vụ thông qua webapp
Tôi có một trang web đơn giản như sau:
<html>
<head></head>
<body>
<img src="icons.svg#close"></img>
<br>
<img src="icons.svg#error"></img>
</body>
</html>
Xem trang này tại địa phương trong Safari, trang hiển thị chính xác:
w ở đây biểu tượng đóng xuất hiện phía trên biểu tượng lỗi.
Tuy nhiên, khi tôi phục vụ các tập tin với NodeJS webapp (hoặc sử dụng lệnh python SimpleHTTPServer) và xem nó trong Safari, sau đó những hình ảnh ở những nơi của nhau:
mặc dù dom vẫn trông chính xác và thuộc tính src của mỗi thẻ img giữ đúng đường dẫn.
Đây là icons.svg file:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>:root>svg{display:none}:root>svg:target{display:block}</style>
<svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close">
<path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
</svg>
<svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error">
<style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style>
<path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/>
<path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/>
</svg>
</svg>
Các trang được trả lại một cách chính xác trong tất cả các trình duyệt khác, bất kể nếu tập tin đang được nạp tại địa phương hoặc phục vụ thông qua một máy chủ.
Rất, rất lạ. Tôi nhận được cùng một hành vi khi các tập tin được truy cập từ một máy chủ web Apache quá. –
tôi đã thử với một vài máy chủ web có sẵn, tôi không thể tái tạo hành vi này. nó có thể được gây ra bởi máy chủ web của bạn không phục vụ các tập tin icons.svg về thời gian, do đó, trình duyệt quyết định không chờ đợi và thử biểu tượng tiếp theo và sau đó svg có sẵn? – ilj
Nếu không có Safari để kiểm tra, nó cũng có thể là một vấn đề loại nội dung tiêu đề HTTP. –