个性化阅读
专注于IT技术分析

SVG defs元素用法详解

SVG <defs>元素用于嵌入可在SVG映像内重用的定义。

使用SVG <defs>元素, 你可以将SVG形状组合在一起, 并将其作为单个形状重复使用。

当你通过<use>元素引用<defs>元素中定义的形状时, 将显示该形状。

例子

<!DOCTYPE html>
<html>
   <body>
   
<svg>
  <defs>
    <g id="shape">
        <rect x="40" y="40" width="40" height="40" />
        <circle cx="40" cy="40" r="40" />
    </g>
  </defs>

  <use xlink:href="#shape" x="40" y="40" />
  <use xlink:href="#shape" x="160" y="40" />

</svg>

</body>
</html>

立即测试

解释

  • <g>的id属性定义一个唯一的名称。
  • <use>元素通过其xlink:href属性引用<g>元素。
  • #符号定义属性值。
  • <use>元素用于通过其x和y属性指定在何处显示重复使用的形状。
赞(0) 打赏
未经允许不得转载:srcmini » SVG defs元素用法详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏