锐客网

  1. 首页 > 睿知 > it技术 > >

SVG defs元素用法详解

svgIT知识

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="http://www.srcmini.com/#shape" x="40" y="40" /> < use xlink:href="http://www.srcmini.com/#shape" x="160" y="40" /> < /svg> < /body> < /html>

【SVG defs元素用法详解】立即测试
解释
  • < g> 的id属性定义一个唯一的名称。
  • < use> 元素通过其xlink：href属性引用< g> 元素。
  • ＃符号定义属性值。
  • < use> 元素用于通过其x和y属性指定在何处显示重复使用的形状。

    推荐阅读


    上一篇：SVG基本形状详细介绍

    下一篇：SVG symbol元素用法详解