svg

最新推荐文章于 2024-01-27 16:20:11 发布

空杯lk

最新推荐文章于 2024-01-27 16:20:11 发布

阅读量103

点赞数

分类专栏：笔记

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

svg

svg: scalable vector graphics，可缩放的矢量图

该图片使用代码书写而成
缩放不会失真
内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

    <style>
        img, embed, object, iframe{
            width: 100px;
            height: 100px;
        }
        p{
            width: 100px;
            height: 100px;
            background: url("imgs/weixin.svg") no-repeat center/cover;
        }
    </style>
</head>
<body>
    <img src="imgs/weixin.svg" alt="">
    <p></p>
    <embed src="imgs/weixin.svg" type="image/svg+xml">
    <object data="imgs/weixin.svg" type="image/svg+xml"></object>
    <iframe src="imgs/weixin.svg"></iframe>
</body>

书写svg代码

矩形:rect

<rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="5" />

圆形：circle

<circle cx="200" cy="400" r="50" fill="transparent" stroke="#000" stroke-width="5"/>

椭圆：ellipse

<ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#000" stroke-width="5" />

线条：line

<line x1="10" y1="10" x2="300" y2="30" stroke="#000" stroke-width="3" />

折线：polyline

<polyline points="300,100,350,100,350,150,400,150,400,200" fill="red" stroke="#000" stroke-width="3"/>

多边形：polygon

 <polygon points="300,300, 400, 400, 300, 500" fill="none" stroke="#000" stroke-width="3" /> -->

路径：path

<path d="M150 600 L300 600 L300 800 L150 800 Z" fill="red" style="stroke:#000; stroke-width:5" />

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

A
半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）

Z = closepath