如何在 SVG <defs> 中重用 <image> 标签？

Question

我遇到一种情况，为了节省内存和加载，我尝试<image>在 SVG 中重用单个标签，而不是在多个<image>标签中引用相同的 xlink:href 。

我的研究表明，这<use>是引用已定义对象的标签。

然而，当我尝试引用图像时，特别是在模式内部（这就是我想要做的），我什么也得不到，而使用图像标签效果很好。

我究竟做错了什么？这可能吗？我尝试搜索，但找不到<use>带有图像的标签的任何示例，只有矩形、路径、组等。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
       x="0px" y="0px" viewBox="0 0 1024 600"  >
<style type="text/css">
    .fillme{fill:url(#tsmall)}
</style>
<defs>
    <image id="texture" xlink:href="texture.tiny.png" />
    <pattern id="tsmall" patternUnits="userSpaceOnUse" width="486" height="402">
        <use xlink:href="#texture" x="0" y="0" width="486" height="402" />
    </pattern>
    <pattern id="tlarge" patternUnits="userSpaceOnUse" width="972" height="804">
        <use xlink:href="#texture" x="0" y="0" width="972" height="804" />
    </pattern>
</defs>
<rect x="0" y="0" width="1024" height="600" class="fillme"/>
</svg>

Answer 1

SVG 图像元素必须具有宽度和高度属性，而您的则没有。

图像是一个图形元素，如果您将 a 指向<use>图形元素，则根据 SVG 规范，<use>宽度和高度将被忽略（因为它不是符号或 svg 元素，因此它属于规范中的“其他情况”）