CSS之SVG

一、学习链接

  • 阮一峰-SVG 教程

  • 菜鸟教程-SVG 教程

  • 菜鸟教程-SVG 实例


二、简介

【0】SVG 效果预览

image

在线观看

源码地址

【1】SVG 的预定义形状

  • 矩形
  • 圆形
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 路径

【2】SVG 的通用标准语法

  • width:宽度;
  • height:高度;
  • fill:填充色;
  • fill-opacity:填充颜色透明度;
  • stroke:边框色;
  • stroke-widt:边框的宽度;
  • stroke-opacity:边框颜色的透明度;
  • stroke-linecap:不同类型的开放路径的终结;
  • stroke-dasharray:边框虚线;
  • x:左侧位置;
  • y:顶端位置;
  • opacity:透明值。


stroke-linecap:








stroke-dasharray:








  
    
    
    
  



  
    
    
    
  

【3】使用

【3.1】直接写入html






  



【3.2】写在独立文件中,用

【3.3】CSS 中使用 SVG

.logo {
  background: url(icon.svg);
}

【3.4】SVG 转为 BASE64 编码,然后作用 DATA URL 写入网页。



三、元素语法

【1】

SVG 代码都放在顶层标签之中,如果只想展示 SVG 图像的一部分,就要指定viewBox属性。


  

【2】矩形




  

【3】圆形

  • CX:圆中心的 x 坐标;

  • CY:圆中心的 y 坐标;

  • r:圆的半径。




  

【4】椭圆

  • CX:圆中心的 x 坐标;

  • CY:圆中心的 y 坐标;

  • RX:水平半径;

  • RY:垂直半径。




  

【5】直线

  • x1:x 轴定义线条的开始;
  • y1:y 轴定义线条的开始;
  • x2:x 轴定义线条的结束;
  • y2:y 轴定义线条的结束。




  

【6】多边形




  

【7】曲线





  
  

【8】路径

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath




    

【9】文本






I love SVG I love SVG


   
    
  
  
    I love SVG I love SVG
  


四、元素滤镜

【1】

  • 元素 id 属性定义一个滤镜的唯一名称;
  • 标签用于自定义形状

【2】模糊







fill="yellow" filter="url(#f1)" />


  
    
      
    
  
  

【3】阴影

  • 更多阴影效果









fill="yellow" filter="url(#f2)" />


  
    
      
      
      
    
  
  

【4】线性渐变










  
    
      
      
    
  
  

【5】放射性渐变










  
    
      
      
    
  
  


五、更多元素标签

【1】



圆形




  
    圆形
    
  

  
  

【2】图案填充









  
    
      
    
  
  

【3】图片


width="100%" height="100%"/>


  

【4】动画

  • attributeName:发生动画效果的属性名。

  • from:单次动画的初始值。

  • to:单次动画的结束值。

  • dur:单次动画的持续时间。

  • repeatCount:动画的循环模式。






  
    
  

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