SVGで描くピースマーク #HTML5

svg入門でピースマーク書いてみた。

M
初期位置,位置のスキップ
L
直線を引く
H
水平線を引く
V
垂直線を引く

hoge

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<svg id="canvas" viewBox="0 0 200 200">
    <!-- 円 -->
    <circle cx="100" cy="100" r="80" stroke="yellow" stroke-width="3" fill="none"/>

    <!-- 垂直線 -->
    <path d="M 100 20 v 160" stroke="yellow" stroke-width="3"/>

    <!-- 斜め線-->
    <path d="M 100 100 L 38 150" stroke="yellow" stroke-width="3"/>
    <path d="M 100 100 L 162 150" stroke="yellow" stroke-width="3"/>
</svg> 

    <style type="text/css">
    #canvas{
        width: 500px;
        height: 500px;
    }
    </style>
</body>
</html>