svg 1

原创已于 2022-07-18 16:41:25 修改 · 278 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

于 2022-07-16 17:10:01 首次发布

本文介绍了如何使用SVG（可缩放矢量图形）在网页中绘制矩形、圆形和椭圆。通过设置不同属性，如位置、尺寸、颜色和描边，可以灵活地创建和定制这些图形。例如，矩形可以通过`<rect>`标签定义，圆通过`<circle>`标签，椭圆通过`<ellipse>`标签。此外，还详细说明了各个属性的作用，如`fill`用于填充颜色，`stroke`用于描边颜色，`stroke-width`用于描边宽度，以及圆角半径等参数。

1创建 svg

在body中输入svg标签，给宽高

<body>
    <svg width="500" height="500">
       
    </svg>
</body>

2.画矩形 rect

下面是画矩形的主要属性

根据以上的属性可以写出

<body>
    <svg width="500" height="500">
        <rect x="160" y="150" width="250" height="200" fill="red" stroke="green" 
        stroke-width="5" rx=:"50" ry="100"></rect>
    </svg>
</body>

位置是在 160 150 颜色填充red 红色不想有颜色 fill=nome stroke外边框green

描边stroke-width="5" 宽度 5px rx=:"50" ry="100"圆角的半径

绘制圆 circle

要绘制圆形可以通过circle元素来实现，在绘制圆形时，需要确定这个圆的圆心及半径，其中确定圆心需要用到cx属性和cy属性，半径需要用到r属性，，还可以使用fill属性圆进行颜色填充，stroke属性进行描边

<svg width="500" height="500">
       <circle cx="300" cy="300" r="100" fill="red" stroke="green"
       stroke-width="10" stroke-opacity="0.3"></circle>
    </svg>

效果

上述代码中圆的圆心被设置为 300，300 半径100 颜色填充red 红色不想有颜色 fill=nome

描边stroke-width="10" 宽度 10px

画椭圆 ellipse

在绘制椭圆时，可以通过cx和cy属性确定椭圆的圆心，rx设置椭圆的 x 轴的半径 ry设置y轴的半径。

   <ellipse cx="200" cy="200" rx="100" ry="50"></ellipse>

椭圆的圆心为 300 300 x的半径是100 ry是y的半径

没有做美化所以是黑色