0

我有两个 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？

4

1 回答 1

0

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

于 2017-06-16T19:19:38.427 回答