Question

最近我一直在尝试学习如何使用SVG创建图形，并且在尝试显示带有'use'标签的图像时遇到了一个问题。

我已经成功地使用了'use'标记在其他svg中创建了重复的对象，所以我不确定这里发生了什么。我试图用'use'标签显示该符号会导致一个不可见的对象，宽度x高度为0x0

<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    <g id="yinyang">
    <circle r="39"/>
    <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
    <circle cy="19" r="5" fill="#fff"/>
    <circle cy="-19" r="5"/>
    <g/>
    <use href="#yinyang" transform="scale(20)"/>
</svg>

我该如何解决？

Answer 1

可能只是带有您的结束群组标签<g/>的错字

<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
    <defs>
       <g id="yinyang">
        <circle r="39"/>
        <path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
        <circle cy="19" r="5" fill="#fff"/>
        <circle cy="-19" r="5"/>
      </g>
    </defs>
    
    <use href="#yinyang" transform="scale(0.9)"/>
</svg>

此外，use块将重复已经可见的形状。如果您只想在某处定义它，然后在其他地方重复使用，则可以放在<defs>块中

SVG为什么不呈现<use>标记引用的对象？

1 个答案: