web-dev-qa-db-ja.com

URL svgをロードする安全でない試み

ローカルファイルシステムに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では問題なく動作します。

htmlgoogle-chromesvg
18
Sabumnim

このページにはすべての答えがあります、私は信じています：

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

  • ポリフィルを使用しない限り、IEでは機能しません。
  • ページの下のコメントは、ローカルで実行している場合のChromeの問題を説明しています。

サーバーを使用して開発していない場合、ローカルで開発するときにこの手法を使用すると、クロスドメインの問題が発生する可能性があります。

6
Shikkediel

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を使用してヘッダーを設定することです。

0
Paul Frank

davidwells.io で書いたように（このページには彼のJavascriptによる問題の解決法もあります）

外部SVGファイルを使用したときにも同じ問題が発生しました。仮想サーバーの構成を変更し、SVG要求のHTTPからHTTPSへの自動リダイレクトを停止する必要がありました。他の言葉：SVGファイルは両方のプロトコルで利用可能でなければなりません。これで動作します。

0
revoke