为什么< use> SVG中的代码不起作用? [英] Why the <use> tag in SVG doesn't work?

问题描述

我有一个简单的例子.它存储在 image.svg :

I have the following simple example. It is stored in image.svg:

<svg>
        <defs>
        <g id="shape">
            <circle cx="100" cy="100" r="100" />
        </g>
        </defs>
</svg>

但是，将此代码放入HTML文件不会加载任何内容.为什么会这样?

However, putting this code in a HTML file doesn't load anything. Why is that?

<svg>
        <use xlink:href="#shape" x="10" y="10" />
</svg>

我做错了什么?我似乎无法使其正常工作.

What am I doing wrong? I can't seem to make it work.

推荐答案

您需要在SVG中使用您要使用的形状的use-tag:

You need to have the use-tag inside the SVG with the shape you want to use:

<svg>
    <defs>
        <g id="shape">
            <circle cx="100" cy="100" r="100" />
        </g>
    </defs>

    <use xlink:href="#shape" x="10" y="10" />
</svg>

这篇关于为什么< use> SVG中的代码不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！