logo标签列表

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

svg
6
我有一个情况，需要节省内存和加载时间，我想在SVG中重复使用单个<image>标签，而不是在多个<image>标签中引用相同的xlink:href。
我的研究表明，<use>是引用定义对象的标签。
然而，当我尝试引用图像，特别是在模式中（这就是我想做的），我什么都没有得到，而使用图像标签却可以正常工作。
我做错了什么？这可能吗？我尝试搜索，但找不到任何<use>标记与图像一起使用的示例，只有rects、paths、groups等。
<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>
经过几分钟的谷歌搜索，我没有找到任何关于可以在PNG中使用<use>的信息。也许尝试用SVG元素替换你的PNG？至少如果这样能行，你就可以排除其他语法错误导致问题的可能性。 - Taraz
2
@Taraz，那你需要回到谷歌学校了。任何“svg”、“symbol”、“g”、图形元素或其他“use”都可能是模板（https://www.w3.org/TR/SVG/struct.html#UseElement），而图像是一个图形元素（https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement）。 - Robert Longson
@Taraz，我没有看到任何说明你不能这样做，所以我才问的 :) - mix3d
1个回答
3
1
使用变换能否实现类似的效果？例如 <use xlink:href="..." transform="scale(200%)"/>？ - mix3d
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接