svg08——<use>&<defs>标签创建图形引用

在 js中,当我们需要重复使用一个字段,会将它定义为一个变量,在多个地方使用
在svg中,当我们需要重复使用一个图形时,要怎么处理呢?

一、通过<use>&<defs>标签,在html中直接使用

使用方式:

  • 将图形等放在 中提前定义好,并设置 id(defs中可设置多个)
  • 标签的 xlink:href 属性指定对应的 id
  • 注意,defs 中的内容并不会直接渲染,在使用时才会渲染

  
    
    
    
  
  
  

svg08——<use>&<defs>标签创建图形引用_第1张图片

二、也可以在js中生成引用,来看实例

前面03篇讲到,可以用js创建svg,同样的use也可以用js创建。直接来看一个综合实例



    
    
    
    use标签的使用
    


    
        
            
        
        
        
    
   




这样我们就得到了一个星空~

svg08——<use>&<defs>标签创建图形引用_第2张图片

三、defs的其他用法

defs中除了可以定义图形,也可以定义 渐变效果 ,只是使用时就不通过use了

我们下一篇一起来学习 渐变

你可能感兴趣的:(svg08——<use>&<defs>标签创建图形引用)