大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
SVG 是使用 XML 来描述二维图形和绘图程序的语言
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG坐标系统：
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915105609891-1934548173.png)
![SVG基本图形[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
一、圆
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915104022922-113572369.png)
<svg width="50" height="50"> <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"></circle> </svg>
cx和cy属性定义圆点的x和y坐标，如果省略cx和cy，圆的中心会被设置为（0,0）；r定义半径；
fill：内部填充颜色；stroke：轮廓颜色；stroke-width：轮廓宽；opacity：透明度, 0.0完全透明，1.0不透明
二、矩形
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915110043110-367150676.png)
<rectx="0"y="0"width="500"height="50"/>
三、椭圆
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915110008469-1122005013.png)
<ellipsecx="250"cy="25"rx="100"ry="25"/>
四、线条line
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915105932860-602845348.png)
<linex1="0"y1="0"x2="500"y2="50"stroke="black"/>
五、折线polyline
用来创建只包含直线的形状
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915123333328-840207310.png)
<svg> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"></polyline> </svg>
六、路径path
下面的命令可用于路径数据：（命令详情可查看https://segmentfault.com/a/1190000005053782）
- M = moveto 两个参数 画笔起始位置
- L = lineto 两个参数，画直线（x ,y）坐标 ，在当前位置和新位置（L前面画笔所在的点）之间画一条线段
- H = horizontal lineto 一个参数，绘制水平直线
- V = vertical lineto 一个参数，绘制垂直线
- C = curveto 三次贝塞尔曲线 命令参数：C x1 y1, x2 y2, x y 起点控制点，终点控制点，终点
- S = smooth curveto 简写的贝塞尔曲线命令 命令参数：S x2 y2, x y
- Q = quadratic Belzier curve 二次贝塞尔曲线 命令参数：Q x1 y1, x y 控制点，终点坐标
- T = smooth quadratic Belzier curveto Q命令的简写 T x y
- A = elliptical Arc
- Z = closepath 闭合路径，从当前点画一条直线到路径的起点。不区分大小写
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915123656891-1992006854.png)
<svg>
<path d="M250 150 L150 350 L350 350 Z" stroke="blue" stroke-width="2"/>
</svg>
五、text
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915110206766-1005950128.png)
<textx="250"y="25" fill="gray" font-family="serif" font-size="25">Easy-peasy</text>
Layering and Drawing Order
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915110656797-891673361.png)
<svg width="500" height="50"> <rect x="0" y="0" width="30" height="30" fill="purple"/> <rect x="20" y="5" width="30" height="30" fill="blue"/> <rect x="40" y="10" width="30" height="30" fill="green"/> <rect x="60" y="15" width="30" height="30" fill="yellow"/> <rect x="80" y="20" width="30" height="30" fill="red"/> </svg>
Transparency
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915111005578-1650017064.png)
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/> <circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/> <circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/> <circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/> <circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915111436766-248387165.png)
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/> <circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/> <circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915114120641-1449828004.png)
<svg width="500" height="50"> <circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"/> <circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"/> <circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"/> </svg>
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915114519063-1471287286.png)
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/> <circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/> <circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"/> //透明度应用在整个circle元素上
![SVG基本图形[通俗易懂]](https://images2017.cnblogs.com/blog/612653/201709/612653-20170915114835969-456415482.png)
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/> <circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/> <circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/167185.html原文链接：https://javaforall.net
