【SVG 】各种形状标签用法 + 示例

教程参考:https://www.w3school.com.cn/svg/index.asp

备忘录,直接代码




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding:0;}
        #d1{text-align: center;stroke-width:1;
            stroke:rgb(0,0,0)}   /* 让svg居中*/
        svg{width: 1200px;height: 700px;border: 1px solid #ccc;margin: 50px 0;}
        rect{
            width:500px;height: 500px;
            /*在这里border 和 background 是无效的*/
            /*border: 1px solid #ccc;  边框要用  stroke来设置*/
            /*background: #ffa;  背景填充色要用 fill*/
            fill:#faf;
            stroke-width:2;
            stroke:#0a8ed3;
        }



    </style>
</head>
<body>

    <!--svg中的样式大部分都可以当做其他元素一样,由CSS来定义样式,但也只是大部分,有些还是单独处理的,比如边框,背景色等-->
    <div id="d1">
        <svg>

            <!--如果图形不设置坐标点,默认基本上都是0,单位默认是px-->

            <!--矩形标签: rect-->
            <!--从svg左上角水平30像素,垂直50像素的地方开始画  rx 和 ry 类似于border-radius,用来定于倒角 单位默认是px,另外 % 也是可以的,都定义为50% 就可以用rect直接画个圆了-->
            <rect x="30" y="50" rx="5" ry="5" />


            <!--圆形标签:circle-->
            <!--cx,cy 圆形中间点的坐标位置, r 半径长度-->
            <circle cx="100" cy="150" r="50" style="fill:#0f0;" />


            <!--椭圆标签:ellipse-->
            <!--这里的rx 指的是水平半径  ry 是垂直半径  不能跟倒角那个混淆了-->
            <ellipse cx="500" cy="350" rx="100" ry="150" style="fill:#afa;"/>


            <!--线条标签:line-->
            <!--这个标签会有4个坐标值  x1:x轴开始位置  y1 :y轴开始  x2:x轴结束   y2:y轴结束-->
            <line x1="10" y1="10" x2="300" y2="300" style="stroke:#fea;stroke-width:2"/>


            <!--折线标签:polyline-->
            <!--说是折线,用起来更像是多边形的感觉,默认也是有黑的填充色,如果只是要单纯的折线效果,记得一定要背景色改成透明的-->
            <!--从水平500 垂直600开始, 依次画到650,450    350,450     500,600-->
            <polyline points="500,600 650,450 350,450 500,600" style="fill: transparent;stroke:red;stroke-width:2"/>


            <!--多边形标签:polygon-->
            <!--画个平行四边形: points坐标: 从xz轴710 50开始画,依次到850 50,800 200, 660,200,最后的坐标会自动跟第一个链接起来-->
            <polygon points="710,50 850,50 800,200 660,200" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>


            <!--路径标签:path-->
            <!--这个是标签中最复杂的一个,先画个例子,详细注释在下面,-->
            <!--从750 350开始画,然后画到850 350,再到950 550, 800 500  Z闭合路径,用来把最后画的点和第一个点连接起来-->
            <path d="M750 350 L850 350 L950 550 L800 500 Z" style="fill:#cccccc;" />
            <!--下面的命令可用于路径数据:(用法类似于canvas的画线操作,默认会有黑色边框黑色填充)-->
            <!--M = moveto-->
            <!--L = lineto-->
            <!--H = horizontal lineto-->
            <!--V = vertical lineto-->
            <!--C = curveto-->
            <!--S = smooth curveto-->
            <!--Q = quadratic Belzier curve-->
            <!--T = smooth quadratic Belzier curveto-->
            <!--A = elliptical Arc-->
            <!--Z = closepath-->
            <!--以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。-->
        </svg>
    </div>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值