ローカルファイルシステムにSVGをロードしようとすると、Chromeでエラーが発生します。
URL file:/// C:/Users/Me/Documents/HTML/icons.svg#menuをURL file:/// C:/Users/Me/Documents/HTML/master.htmlを持つフレームからロードしようとすると、安全ではありません。ドメイン、プロトコル、およびポートは一致する必要があります。
これが私のHTMLです。
<svg id="icon-menu" viewBox="0 0 70 60">
<use xlink:href="icons.svg#menu"></use>
</svg>
および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>
私はインターネットを検索しましたが、見つけることができる唯一の解決策はJavaScriptで既に記述されたコードに対するものですが、これはそうではありません。上記のHTMLはIEでは機能せず、エラーは発生しませんが、Firefoxでは問題なく動作します。
このページにはすべての答えがあります、私は信じています:
https://css-tricks.com/svg-use-external-source/
サーバーを使用して開発していない場合、ローカルで開発するときにこの手法を使用すると、クロスドメインの問題が発生する可能性があります。
express.js、Apache、nginxなどのサーバーを使用して、必要なファイルを提供します。できれば、テンプレートやフロントエンドで参照できるように、必要なすべての画像を保持するsvg Spriteを使用してください。
<svg style="color: red;">
<use xlink:href="solid.svg#ad"></use>
</svg>
バックエンドで、このようにserver.jsファイルでexpress.jsを使用している場合、
app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));
^ svg Spriteが存在する静的ディレクトリを参照します。これにより、CORSの問題を回避できます。別の方法は、私より上の別の人がcss-tricksへのリンクを投稿したajaxを使用してヘッダーを設定することです。
davidwells.io で書いたように(このページには彼のJavascriptによる問題の解決法もあります)
外部SVGファイルを使用したときにも同じ問題が発生しました。仮想サーバーの構成を変更し、SVG要求のHTTPからHTTPSへの自動リダイレクトを停止する必要がありました。他の言葉:SVGファイルは両方のプロトコルで利用可能でなければなりません。これで動作します。