SVG入门

最新推荐文章于 2024-05-31 11:58:10 发布

雨沥Moni

最新推荐文章于 2024-05-31 11:58:10 发布

阅读量2.3k

点赞数 1

分类专栏： svg学习笔记文章标签： svg 新手

本文链接：https://blog.youkuaiyun.com/qq_17287105/article/details/83791745

版权

这篇博客介绍了SVG的基础使用，包括创建圆、矩形、圆角矩形、椭圆、直线、多边形、曲线、路径、文本及其各种属性，如fill、stroke、fill-opacity等。还提到了SVG的旋转、文本链接、虚线、模糊效果和渐变，并推荐使用SVG编辑器绘制复杂图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg 使用笔记

创建一个圆：
半径为40,圆心为(100,100), 填充色是红色
stroke表示边框
stroke-width表示边框线条的粗细

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

创建一个矩形
fill,stroke等属性既可以直接写也可以写到style里
fill-opacity表示填充色的透明度

<svg>
      <rect width="200" height="100" fill="#0000ff" stroke="#000000" stroke-width="3"></rect> 
      <rect width="200" height="100" style="fill:red;stroke-width:6;stroke:rgb(0,0,0);fill-opacity:0.1" ></rect>
</svg>

创建一个圆角矩形

<svg width="800" height="600">
       <rect width="200" height="100" x="50" y="50" rx="10" ry="10"></rect>
</svg>

在这里插入图片描述
创建一个椭圆

<svg>
		<ellipse cx="100" cy="50" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

在这里插入图片描述
创建一条直线

stroke-linecap:round线段开始结束用圆弧

<svg>
      <line x1="0" y1&

最低0.47元/天解锁文章