其他分享
首页 > 其他分享> > svg的基本操作

svg的基本操作

作者：互联网

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

2.语法

 <svg style="width: 1000px;height:1000px ">

        <circle r=" 100" cx="500" cy="600" fill="red"></circle> 

</svg>

    <!-- circle表示绘制的图形为圆形 cx表示圆心距左边的距离 cy表示圆心距上面的距离 fill表示图形内填充的颜色 -->

<!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)]

标签：opacity,svg,边框,stroke,基本操作,图形,fill
来源： https://blog.csdn.net/weixin_54083840/article/details/122729126