svg基础

svg基本的内置图形

HTML

<!-- 1、矩形 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect 
      x="50"
      y="20" 
      rx="20" 
      ry="20" 
      width="300" 
      height="100"

      style="fill:#999;stroke-width:2;stroke:#333;fill-opacity:0.1;
    stroke-opacity:0.9"/>
  </svg>
</div>

  <!-- 2、圆形 -->
  
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle 
      cx="100" 
      cy="50" 
      r="40" 
      stroke="black"
      stroke-width="2" 
      fill="red"/>
  </svg>
</div>
    
  <!-- 3、椭圆 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
  </svg>
</div>
  <!-- 4、直线 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
  </svg>
</div>
  <!-- 5、曲线 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
  </svg>
</div>
  <!-- 6、多边形 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
  </svg>
</div>
  <!-- 7、路径 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
  </svg>
</div>
  <!-- 8、文本 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red">miSunLaughing</text>
  </svg>
</div>
<!-- 9、定义和分组 -->
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <defs>
       <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="red" stroke="purple" stroke-width="4" />
       <radialGradient id="irisGradient">
           <stop offset="25%" stop-color="green" />
           <stop offset="100%" stop-color="dodgerblue" />
       </radialGradient>
       <g...

CSS

svg {
  height: 100%;
  width: 100%;
}