SVG로 그리는 피스 마크

3099 단어 HTML5SVG
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>

좋은 웹페이지 즐겨찾기