Question

我遇到了节省内存和加载的情况，我尝试在SVG中重用单个<image>标记，而不是在几个<image>标记中引用相同的xlink：href。 / p>

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

然而，当我尝试引用一个图像时，特别是在一个模式中（我正在尝试做的事情），我什么都没得到，使用图像标签工作正常。

我做错了什么？这甚至可能吗？我尝试过搜索，但找不到带有图片的<use>标记的任何示例，只是rects，路径，组等。

<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图像元素必须具有宽度和高度属性，你的不具备。

图像是图形元素，如果您在图形元素上指向<use>，<use>宽度和高度将被忽略per the SVG specification（因为它不是符号或一个svg元素，它属于规范中否则的情况）

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

1 个答案: