svg 간단한 사용

10590 단어 canvassvg
/span>html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<svg width="500" height="500">
    
    <rect x="10" y="10" width="30" height="30" stroke="pink" fill="yellow" stroke-width="5" id="rect">rect>
    
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="red" fill="blue" stroke-width="5">rect>
    
    <circle cx="25" cy="75" r="20" stroke="blue" fill="gold" stroke-width="5">circle>
    
    <ellipse cx="75" cy="75" rx="20" ry="15" stroke="#00ADEE" fill="#A2DE26" stroke-width="5">ellipse>
    
    <line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5">line>
    
    <polyline points="60 110,65 120,70 115,75 130,80 125,85 140" stroke="orange" stroke-width="5">polyline>
    
    <polygon points="50 160,55 180,70 180,60 190,65 205,50 195,35 205,40 190,30 180,45 180" stroke="gold" fill="yellow" stroke-width="5">polygon>
    
    <path d="M20,230 Q40,205 60,230 T90 230" stroke="red" fill="none" stroke-width="5">path>
svg>
<script>
    var rect = document.getElementById("rect");
    rect.onclick = function () {
        this.style.width = 50;
        this.style.stroke = "blue";
    }
script>
body>
html>

좋은 웹페이지 즐겨찾기