inline svg + html + css による棒グラフ - end0tknr's kipple

svg + html + css による棒グラフ - end0tknr's kipple - web写経開発

以前、上記entryを記載しましたが、今回はsvgをhtml内に記載しています。

ポイントは、色を「stroke="#00F"」のように記載せず、「stroke="rgb(0,0,255)"」のように記載するところだけかも。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style>
    table{ border-collapse: collapse; }
    td   { border: 1px solid #555;
           width : 150px; }
    .graph_bar {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewbox="0 0 4 4"><line x1="0" y1="2" x2="4" y2="2" stroke-width="4" stroke="rgb(0,0,255)"/></svg>');
        background-position: 4px 90%;
        background-repeat: no-repeat;
    }
  </style>
</head>
<body>

  <table>
    <tbody>
      <tr>
        <td class="graph_bar" style="background-size:50px 3px;">5,637</td>
      </tr>
    </tbody>
  </table>
  
</body>
</html>