可视化-svg

svg特点

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

案例1

源码

<div class="flex">
   <div>
       <h2>svg-矩形</h2>
       <div class="box">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="70">
               <rect width="100%" height="50" style="fill:rgb(0,0,255); stroke-width:2; stroke:rgb(0,0,0)" />
           </svg> 
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
               <rect x="120" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9" />
           </svg>
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
               <rect x="20" y="20" rx="20" ry="20" width="250" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.8" />
           </svg>
       </div>
   </div>
   <div>
       <h2>svg-圆</h2>
       <div class="box">
           <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> 
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
               <circle cx="100" cy="50" r="40" style="fill: green; stroke: yellow; stroke-width: 5; opacity: 0.6;" />
           </svg> 
       </div>
   </div>
   <div>
       <h2>svg-椭圆</h2>
       <div class="box">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
               <ellipse cx="150" cy="60" rx="100" ry="40" style="fill:yellow;stroke:purple;stroke-width:2"/>
           </svg>
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="150">
               <ellipse cx="150" cy="100" rx="100" ry="30" style="fill:purple" />
               <ellipse cx="150" cy="70" rx="100" ry="20" style="fill:lime" />
               <ellipse cx="150" cy="45" rx="100" ry="15" style="fill:yellow" />
           </svg>
       </div>
   </div>
</div>

效果图

案例2

源码

<div class="flex">
  <div>
       <h2>svg-直线</h2>
       <div class="box">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
               <line x1="10" y1="0" x2="10" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
               <line x1="50" y1="0" x2="50" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
               <line x1="100" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
               <line x1="150" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:4" />
           </svg>
       </div>
   </div>
   <div>
       <h2>svg-多边形</h2>
       <div class="box">
           <svg height="210" width="160">
               <polygon points="0,10 10,190 160,210" style="fill:lime;stroke:purple;stroke-width:2"/>
           </svg>
           <svg height="210" width="200">
               <polygon points="100,10 40,198 190,78 10,78 160,198"
               style="fill:lime;stroke:purple;stroke-width:5;" />
           </svg>
       </div>
   </div>
   <div>
       <h2>svg-曲线</h2>
       <div class="box">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160">
               <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
           </svg>
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180">
               <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
               style="fill:none;stroke:black;stroke-width:3" />
           </svg>
       </div>
   </div>
</div>

效果图