nỗ lực không an toàn để tải URL svg

Question

Tôi nhận được một lỗi trong Chrome từ cố gắng để tải tập tin SVG lên trên hệ thống tập tin địa phương của tôi:

nỗ lực không an toàn để tải tập tin URL: /// C:/Users/Me /Documents/HTML/icons.svg#menu từ khung có tệp URL: /// C: /Users/Me/Documents/HTML/master.html. Tên miền, giao thức và cổng phải phù hợp.

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

<svg id="icon-menu" viewBox="0 0 70 60"> 
    <use xlink:href="icons.svg#menu"></use> 
</svg> 

và SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 70 70"> 
    <g 
    id="menu"> 
    <path 
     d="m 10,15 50,0" 
     style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" /> 
    <path 
     d="m 10,30 50,0" 
     style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" /> 
    <path 
     d="m 10,45 50,0" 
     style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" /> 
    </g> 
</svg> 

Tôi đã tìm kiếm trên internet, nhưng giải pháp duy nhất mà tôi có thể tìm được cho mã đã được viết bằng JavaScript nhưng điều này thì không. HTML ở trên không hoạt động trong IE, không gây ra lỗi, nhưng hoạt động mà không có sự cố trong Firefox.

Answer 1

Trang này có tất cả các câu trả lời, tôi tin rằng:

https://css-tricks.com/svg-use-external-source/

• Nó chỉ không hoạt động trên IE trừ khi bạn sử dụng một polyfill.
• Comments xuống trang mô tả vấn đề trên Chrome khi chạy cục bộ:

bạn có thể gặp phải một số vấn đề cross-domain với kỹ thuật này khi phát triển tại địa phương, nếu bạn không đang phát triển với một máy chủ.

Answer 2

Như tôi đã viết trên davidwells.io (trên trang này cũng là giải pháp Javascript của ông về vấn đề):

tôi đã cùng một vấn đề khi tôi sử dụng tập tin SVG bên ngoài. Tôi đã phải thay đổi cấu hình của máy chủ ảo và dừng tự động chuyển hướng các yêu cầu SVG từ HTTP sang HTTPS. Các từ khác: tệp SVG phải có sẵn trên cả hai giao thức. Bây giờ nó hoạt động.