SVG Bar and Line Chart

bar.svg

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">

    <defs>
        <filter id="dropshadow" width="120%" height="120%">
            <feGaussianBlur stdDeviation="1"/>
        </filter>
    </defs>

    <!-- 左側のメモリ位置が描画する縦の線 -->
    <line x1="10" y1="500" x2="500" y2="500" stroke="#999" />

    <!-- 右側に描画する縦の線 -->
    <line x1="500" y1="500" x2="500" y2="0" stroke="#999" />

    <!-- バー下部に描画する横の線 -->
    <line x1="10" y1="0" x2="10" y2="500" stroke="#999" />

    <!-- 最初のX軸(0)から終端のX軸(+20)までを高さに50ポイントづつずらしてメモリ位置を描画 -->
    <line x1="0" y1="450" x2="20" y2="450" stroke="#999" />
    <line x1="0" y1="400" x2="20" y2="400" stroke="#999" />
    <line x1="0" y1="350" x2="20" y2="350" stroke="#999" />
    <line x1="0" y1="300" x2="20" y2="300" stroke="#999" />
    <line x1="0" y1="250" x2="20" y2="250" stroke="#999" />
    <line x1="0" y1="200" x2="20" y2="200" stroke="#999" />
    <line x1="0" y1="150" x2="20" y2="150" stroke="#999" />
    <line x1="0" y1="100" x2="20" y2="100" stroke="#999" />
    <line x1="0" y1="50" x2="20" y2="50" stroke="#999" />
    <line x1="0" y1="0" x2="20" y2="0" stroke="#999" />

    <!--
    xは位置(1つ1つでmarginを足していく)
    yはheightと合わせると500になるように
    widthはバーの幅
    marginは40
    -->
    <rect x="50" y="450" width="20" height="50" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="90" y="400" width="20" height="100" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="130" y="350" width="20" height="150" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="170" y="300" width="20" height="200" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="210" y="250" width="20" height="250" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="250" y="200" width="20" height="300" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="290" y="150" width="20" height="350" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="330" y="100" width="20" height="400" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="370" y="50" width="20" height="450" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="410" y="0" width="20" height="500" fill="rgba(33, 99, 255, 0.5)" />
    <rect x="450" y="450" width="20" height="50" fill="rgba(33, 99, 255, 0.5)" />

    <!--
    バーの幅は20で設定しているので、その中間は10でスタートとなるポイントのXに10を足す。
    -->
    <line x1="100" y1="400" x2="60" y2="450" stroke="#f00" stroke-width="2" />
    <line x1="140" y1="350" x2="100" y2="400" stroke="#f00" stroke-width="2" />
    <line x1="180" y1="300" x2="140" y2="350" stroke="#f00" stroke-width="2" />
    <line x1="220" y1="250" x2="180" y2="300" stroke="#f00" stroke-width="2" />
    <line x1="260" y1="200" x2="220" y2="250" stroke="#f00" stroke-width="2" />
    <line x1="300" y1="150" x2="260" y2="200" stroke="#f00" stroke-width="2" />
    <line x1="340" y1="100" x2="300" y2="150" stroke="#f00" stroke-width="2" />
    <line x1="380" y1="50" x2="340" y2="100" stroke="#f00" stroke-width="2" />
    <line x1="420" y1="0" x2="380" y2="50" stroke="#f00" stroke-width="2" />
    <line x1="460" y1="450" x2="420" y2="0" stroke="#f00" stroke-width="2" />
</svg>