HTML5之SVG

SVG API:

  • SVG是一种可缩放矢量图形,一种二维图形表示语言
  • 与canvas不同的是,在浏览器的开发工具中能查看和编辑SVG结构,SVG嵌入到HTML DOM中了
  • 缩放SVG不会导致图片的质量下降,图片不会模糊
  • SVG相关词汇:形状、路径、变换、图案和渐变、可重用的内容、文本
  • 创建SVG

  • 简单的形状的绘制

    
    
    

  • 可以将要变换的SVG元素放在一个组中,添加变换属性进行变换,组内成员可以通过id来引用

    
    
        
        
    

  • 复用内容,元素用于定义下面要使用的内容,元素用于链接到元素定义的内容

    
        
            
            
        
    
    
    
    

  • 图案和渐变(图案可以像素图形或者SVG图形,渐变分为线性渐变和放射性渐变)

    
        
        
            
        

        
            
            
        
    

    
    

  • SVG路径,path有一个D属性,M代表moveTo,L代表lineTo,Q代表二次曲线,Z代表闭合路径

    
        
        
    

  • SVG文本,在浏览器中,文本是可选的,并且能够被搜索引擎搜到

    Happy Trails

  • 组合场景(将上述功能组合成一个跑道场景)



    
    Happy Trails in SVG
    



    
        
            
        
        
            
            
            
        
        
        
        
            
            
        
        
            
            
            
            
        
        
            
            
        
    

    
        
    

    Happy Trails!
    
    
    
    


  • 使用SVG创建交互式应用,添加一个按钮,每添加一个元素其实就是添加一个元素



    
    Happy Trails in SVG
    


Happy Trails! You can remove a tree by clicking on it.

你可能感兴趣的:(HTML5之SVG)