4

したがって、さまざまなパスのコレクションを保持する単一の SVG ファイルがあります。

<!-- icons.svg -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="foo" .../>
  <path id="bar" .../>
  ...
</svg>

私の Web ページでは、次の SVG アイコンを使用しています。

<!-- index.html -->

<svg viewBox="0 0 256 256">
  <use xlink:href="icons.svg#foo">
</svg>

そして、これは私が意図したとおりにうまくfoo機能します-ファイルからIDを持つSVGを選択しicons.svgます。

ここで、タグの属性にファイルへの _absolute_ パスを指定しようとすると、失敗して何も返されず、ファイルが見つからないようです。xlink:href<use>icons.svg.

<svg viewBox="0 0 256 256">
  <use xlink:href="http://localhost:8080/icons.svg#foo">
</svg>

絶対パスが正しいことに注意することが重要です。

のドキュメントxlinkは、絶対パスが有効な値であることを示唆しているようですが、なぜここで機能しないのか疑問に思います-何か不足していますか?

検討すべき代替アプローチはありますか？これは現在、このようなことを達成するために私が取りたいアプローチではありませんか?

4

1 に答える 1

2

外部の svg ファイルを同じプロトコルとポートからロードしていることを確認する必要があります。そうしないと、ブラウザは同一生成元ポリシーに従ってリクエストをブロックします。

プロトコル、ポート(指定されている場合)、およびホストが両方のページで同じである場合、2 つのページのオリジンは同じです。

（私のことを強調してください）

于 2016-08-09T01:31:31.323 に答える