svg的基本操作

最新推荐文章于 2024-07-31 16:50:09 发布

十一号码农啊

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量393

点赞数

分类专栏： html5 文章标签： svg

本文链接：https://blog.csdn.net/weixin_54083840/article/details/122729126

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.svg：绘制缩放的矢量图形

2.语法

</svg>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <svg style="width: 1000px;height:1000px ">
        <circle r=" 100" cx="500" cy="600" fill="red"></circle>
        <!-- circle表示绘制的图形为圆形 cx表示圆心距左边的距离 cy表示圆心距上面的距离 fill表示图形内填充的颜色 -->
    </svg>
</body>

</html>

3.svg内置的几种图形


rect(矩形)    
circle(圆)  
ellipse(椭圆)   
line(直线)   
polyline(折线)  
polygon(多边形)  
path(路径)

4.内置图形的属性

fill(填充颜色)   
fill-opacity(填充透明度)
stroke(边框颜色)   
stroke-width(边框宽度)   
stroke-opacity(边框透明度)   
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]