SVG六基本元素

原创

胜东 2021-06-04 17:29:18 ©著作权

©著作权归作者所有：来自51CTO博客作者胜东的原创作品，请联系作者获取转载授权，否则将追究法律责任

SVG六基本元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg 6 elements</title>
</head>
<body>
    <h1>Hello SVG 6 Elements</h1>
     
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  >
    <rect x="20" y="20" width="50" height="30" rx="5" ry='10'></rect>
    <circle cx="100" cy="20" r="10"></circle>
    <ellipse cx="150" cy="20" rx="10" ry="5"></ellipse>
    <line x1="100" y1="100" x2="110" y2="90" style='stroke:rgb(99,99,99);stroke-width:2'></line>
    <polygon points="100,100 150,150 139,123" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

</svg>
     
</body>
</html>

basic. svg

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" rx="5" ry="5" width="150" height="100" stroke="red" fill="none"></rect>
    <circle cx="250" cy="60" r="50" stroke="red" fill="none"></circle>
    <ellipse cx="400" cy="60" rx="70" ry="50" stroke="red" fill="none"></ellipse>
    <line x1="10" y1="120" x2="160" y2="220" stroke="red"></line>
    <polyline points="250 120 300 220 200 220" stroke="red" fill="none"></polyline>
    <polygon points="250 120 300 220 200 220" stroke="red" stroke-width="5" fill="yellow" transform="translate(150 0)"></polygon>
</svg>