svg做自定义折线图表

设计稿：

做好的效果图：（细节自己慢慢调整）

源码：

<!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>

svg做自定义折线图表

smallStone

引用和评论

收藏的好东西

SVG之Basic Shape

最好的svg使用方案（个人觉得）

svg转字体文件部分线条缺失

用Python插入SVG到PDF文件

【第4期】搜索客 Meetup | INFINI Pizza 网站 SVG 动画这么炫，我教你啊！

SVG 了解下