【SVGⅢ 】画出所有你想要的图形(代码示例)

SVG 使用的直角坐标系以画布左上角为原点(0, 0),y 轴向下为正方向。

代码示例- 矩形 (rectangle)

<svg width="100%" height="80">
    <rect x="10" y="10" width="100" height="60" rx="10" ry="10" fill="#B69E3D">
    </rect>
</svg>

代码示例- 圆形(circle)

<svg width="100%" height="120">
    <circle cx="60" cy="60" r="50" fill="#B69E3D">
    </circle>
</svg>

代码示例-椭圆形 (eclipse)

<svg width="100%" height="110">
    <ellipse cx="60" cy="60" rx="60" ry="40" fill="#B69E3D">
    </ellipse>
</svg>

代码示例-直线(line)

<svg width="100%" height="40">
    <line x1="10" y1="10" x2="80" y2="30" stroke="#B69E3D" stroke-width="5">
    </line>
</svg>

代码示例-折线(polyline)

<svg width="100%" height="90">
    <polyline points="10,60 30,20 80,20 20,90" stroke="#B69E3D" stroke-width="5" fill="none">
    </polyline>
</svg>

代码示例-多边形(polygon)

<svg width="100%" height="90">
    <polygon points="10,60 30,20 80,20 20,90" stroke="#B69E3D" stroke-width="5" fill="none">
    </polygon>
</svg>

代码示例-路径(path)

<svg width="100%" height="60">
    <path d="M 10 10 H 80 V 30 H 10 Z" fill="#B69E3D""/>
</svg>

【SVGⅢ 】画出所有你想要的图形(代码示例)》有117条评论

  1. I got this web page from my friend who shared with me regarding
    this web page and at the moment this time I am browsing this web site and reading very informative articles or reviews at
    this place.

  2. I’ve been exploring for a little for any high quality articles or blog posts on this kind of
    house . Exploring in Yahoo I eventually stumbled upon this website.
    Studying this information So i’m satisfied to show that I’ve a very excellent uncanny feeling I discovered just what I needed.
    I so much undoubtedly will make sure to do not put out of your mind this site and
    provides it a glance on a constant basis.

  3. Everything is very open with a very clear description of the challenges.

    It was really informative. Your site is very useful.
    Many thanks for sharing!

  4. What’s up to every one, the contents existing at this web site are really amazing for people experience, well, keep up
    the nice work fellows.

  5. whoah this blog is wonderful i really like reading your articles. Keep up the great paintings! You realize, a lot of people are hunting round for this info, you could help them greatly.

发表评论

您的电子邮箱地址不会被公开。