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

最新推荐文章于 2023-09-06 14:27:55 发布

info_foo

最新推荐文章于 2023-09-06 14:27:55 发布

阅读量232

点赞数

分类专栏： HTML CSS JS

本文链接：https://blog.csdn.net/weixin_45935720/article/details/105562915

版权

HTML CSS JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

svg

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

首先得在VSCode安装插件SVG,书写先使用尖括号+元素+tabulator自动生成

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

怎么使用

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

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

书写svg代码

矩形：rect

圆形：circle

椭圆：ellipse

线条：line

折线：polyline

可以由多条线构成，折线构成的填充区域是起始点与终点相连，可设置为none

多边形：polygon

路径：path

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
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" type="image/x-icon" href="imgs/bd2.ico">
</head>
<body>
    <img src="test1.svg" alt="">
</body>
</html>

添加css样式：

<svg style="background:gray;" width="500" height="1000"  xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="5" />
    <circle cx="200" cy="400" r="50" fill="transparent" stroke="#000" stroke-width="5" />
    <ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#fff" stroke-width="5" />
    <line x1="10" x2="10" y1="300" y2="30" stroke="#000" stroke-width="5" />
    <polyline points="300,100,350,100,350,150,400,150,400,200" fill="none" stroke="#000" stroke-width="5" />

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

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

    <path d="M300 300 A150 150 0 1 0 450 150 " fill="none" style="stroke:#000; stroke-width:3" />
</svg>

例子：八卦图

添加css样式：

<svg style="background:#ccc;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <!-- <circle cx="250" cy="250" r="200" fill="none" stroke="#999" stroke-width="2" /> -->
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="#000"  />
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" fill="#fff"  />

    <circle cx="250" cy="150" r="30" fill="#fff" />
    <circle cx="250" cy="350" r="30" fill="#000" />
</svg>

info_foo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg: scalable vector graphics ,可缩放的矢量图

svgsvg: scalable vector graphics ,可缩放的矢量图该图片使用代码书写组成缩放不会失真内容轻量怎么使用svg可以嵌入浏览器，也可以单独成为一个文件xml语言，svg使用该语言定义书写svg代码矩形：rect圆形：circle椭圆：ellipse线条：line折线：polyline可以由多条线构成，折线构成的填充区域是起始点与终点相连，...
复制链接

扫一扫

专栏目录