Question

我无法让SVG use在内部工作。

我可以让SVG use用于外部参考。

这有效：

<svg>
 <defs>
    <symbol id = "foo">
       <some svg stuff>
    </symbol>
 </defs>
</svg>

HTML

<svg><use xlink:href="my.svg#foo"/></svg>

但是我想在SVG内部重复使用符号。所以这不起作用：

<svg>
 <defs>
    <symbol id = "foo">
       <some svg stuff>
    </symbol>
 </defs>
 <g id = "foo-bar">
    <use xlink:href="#foo"/>
 </g>
</svg>

HTML

<svg><use xlink:href="#my.svgfoo-bar"/></svg>

Answer 1

use在内部工作。请看这个示例：http://jsfiddle.net/0o4jtntL/

正如您所看到的，只有一个警告：定义的符号在使用之前可能会被歪曲。因此，请确保在定义时在屏幕中央绘制此符号。

<svg>
 <defs>
    <symbol id = "foo">
        <circle cx="0" cy="0" r="10" fill="red" stroke="black"/>
    </symbol>
 </defs>
 <g id = "foo-bar">
    <use x="20" y="20" xlink:href="#foo"/>
    <use x="0" y="50" xlink:href="#foo"/>
    <use x="40" y="10" xlink:href="#foo"/>
 </g>
</svg>

SVG <use>内部</use>

1 个答案: