SVG Xlink 不会在 <use> 标签中使用 xlink:href 链接到外部文件答案

【问题标题】：SVG Xlink won't link to external file with xlink:href in <use> tagSVG Xlink 不会在 <use> 标签中使用 xlink:href 链接到外部文件
【发布时间】：2017-11-18 13:15:58
【问题描述】：

我有两个 SVG 文件。我正在尝试将 rect.svg 的内容链接到 tst_use.svg。 tst_use.svg 的内容是，

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.1" id="svg_hom_img" width="508" height="438">
<use x="0" y="0" id="us_g1_0" width="508" height="438" xlink:href="rect.svg"/>
</svg>

而rect.svg的内容是，

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.1" id="svg_hom_img" width="508" height="438">
<rect x="0" y="1" width="250" height="250" id="BackDrop" pointer-events="all" style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2;     stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"/>
</svg>

当然，这两个文件在同一个目录下。我尝试了多种组合。该代码内联工作。 rect.svg 显示在浏览器中。我还可以将文件与 javascript 拼凑在一起。其他人使用这种语法。为什么 tst_use.svg 不能 xlink 到 rect.svg？

【问题讨论】：

不能指向 SVG 1.1 中的完整文件，它必须指向该文件中的某些内容。如果你想要一个完整的文件，请使用标签。

标签： svg href xlink

【解决方案1】：

使用 Robert Longson 的评论，我将 test_use.svg 更改为，

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.0" id="svg_hom_img" width="508" height="438">
  <use x="0" y="0" id="us_g1_0" width="508" height="438" xlink:href="rect.svg#BackDrop"/>
</svg>

使用与问题中相同的 rect.svg。这在 Firefox 中显示了矩形，但在 Chrome 中没有。看来 javascript 是最好的解决方案。

【讨论】：