svg作自定義折線圖表

時間  2019-12-05
標籤 svg 自定義 折線 圖表 简体版
原文   原文鏈接

設計稿：
clipboard.pnghtml

作好的效果圖：（細節本身慢慢調整）svg

clipboard.png

源碼：url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
svg line {
    shape-rendering: crispEdges;
} 
    svg{
        font-family: '微軟雅黑'
    }
</style>
<body>
<svg width="420" height="280" viewBox="0,0,420,280">
    <g>
     <line x1="0" y1="30" x2="420" y2="30"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="0" y1="100" x2="420" y2="100"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
       <line x1="0" y1="170" x2="420" y2="170"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
        <line x1="0" y1="240" x2="420" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:2"></line>
      <line x1="30" y1="0" x2="30" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="100" y1="0" x2="100" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="170" y1="0" x2="170" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="240" y1="0" x2="240" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="310" y1="0" x2="310" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
      <line x1="380" y1="0" x2="380" y2="240"
      style="stroke:rgb(143,143,143); stroke-width:1"></line>
    </g>
    <g>        
    <text x="10" y="258" fill="#333">03.12</text>
    <text x="80" y="258" fill="#333">06.15</text>
    <text x="150" y="258" fill="#333">06.18</text>
    <text x="220" y="258" fill="#333">07.11</text>
    <text x="290" y="258" fill="#333">08.02</text>
    <text x="360" y="258" fill="#333">09.18</text>
    </g>
    <g>
        <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgba(36,185,13,0.4); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgba(255,255,255,0.6); stop-opacity:1"/>
        </linearGradient>
        </defs>
          <path d="M30,110 L100,210 L170,60 L240,40 L310,50 L380,140 L380,240 L30,240 Z" style="fill:url(#orange_red);stroke:none;"/> 
         <polyline points="30,110 100,210 170,60 240,40 310,50 380,140" style="fill:none;stroke:#3fc371;stroke-width:2"/>
    </g>  
   <g>
    <circle cx="30" cy="110" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/>
    <circle cx="30" cy="110" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/>
    <circle cx="100" cy="210" r="4" stroke="none" fill="#3fc371"/>
    <circle cx="170" cy="60" r="4" stroke="none" fill="#3fc371"/>
    <circle cx="240" cy="40" r="4" stroke="none" fill="#3fc371"/>
    <circle cx="310" cy="50" r="4" stroke="none" fill="#3fc371"/>
    <circle cx="380" cy="140" r="4" stroke="none" fill="#3fc371"/>
    <circle cx="380" cy="140" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/>
    <circle cx="380" cy="140" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/>
   </g>
</svg>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程