Question

我有两个SVG文件。我正在尝试将rect.svg的内容xlink链接到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？

Answer 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是最好的解决方案。

SVG Xlink不会使用<use>标记中的xlink：href链接到外部文件

1 个答案: