svg和canvas

最新推荐文章于 2023-11-15 17:42:04 发布

VIP文章 4~3

最新推荐文章于 2023-11-15 17:42:04 发布

阅读量286

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_46634841/article/details/109734816

版权

矢量图：
svg:svg意为可缩放矢量图形。它是使用XML格式来定义的图像。通过svg画出来的图形为矢量图，所以svg图像在放大或者改变尺寸的情况下图形的质量不会有所损失。

在 HTML 中嵌入svg图像
除了通过浏览器直接打开svg文件，我们还可以将svg图像嵌入到 HTML 代码里面，示例如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>

或者将 img 标签的 src 属性设置为一个svg文件的路径，如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="./1.svg" alt="">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>

svg绘制简单图形：
svg有一些预定义的形状元素，可被开发者使用和操作：
矩形：rect
圆形：circle
椭圆：ellipse
线：line
折线：polyline
多边形：polygon
路径：path

用svg画矩形：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>    
</svg>

代码说明：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度。
style 属性用来定义 css 属性。
css 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。
css 的 stroke-width 属性定义矩形边框的宽度。
css 的 stroke 属性定义矩形边框的颜色。

用svg画圆形：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

代码说明：
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)。
r 属性定义圆的半径。

用svg画椭圆

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

代码说明：
cx 属性定义圆点的 x 坐标。
cy 属性定义圆点的 y 坐标。
rx 属性定义水平半径。
ry 属性定义垂直半径。

用svg画线条：

<?xml version="1.0" standalone="no"?>
<!

最低0.47元/天解锁文章

4~3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg和canvas

矢量图：svg:svg意为可缩放矢量图形。它是使用XML格式来定义的图像。通过svg画出来的图形为矢量图，所以svg图像在放大或者改变尺寸的情况下图形的质量不会有所损失。在 HTML 中嵌入svg图像除了通过浏览器直接打开svg文件，我们还可以将svg图像嵌入到 HTML 代码里面，示例如下：<body> <p>Lorem ipsum dolor sit amet.</p> <svg xmlns="http://www.w3.org/2000
复制链接

扫一扫