SVG实例代码笔记，详细注释（三）
svg实例汇总：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- SVG内容直接定义在html页⾯中 -->
<!-- 直接嵌⼊的SVG会继承⽗⽂档的样式，默认情况下采⽤inline的⽅式进⾏显⽰。 -->
<!-- SVG绘制图形使⽤‘/’单标签表⽰结束符 -->
<svg xmlns="/2000/svg"version="1.1"width="1000"height="1000">
<!-- 矩形元素 -->
<rect x="30"y="30"width="300"height="100"rx="20"ry="20" />
<!-- x和y - 绘制矩形的左上⾓坐标值
width和height - 设置绘制矩形的宽度和⾼度
rx和xy - 设置矩形的圆⾓
矩形的轮廓线为5px的红⾊轮廓，填充⾊为⽜油果绿-->
<!-- 椭圆元素 -->
<ellipse cx="400"cy="220"rx="100"ry="200"  /> <!-- cx和cy - 绘制椭圆的圆⼼坐标值
rx和ry- 绘制椭圆的⽔平⽅向/垂直⽅向的半径【注意：当rx和ry的值相同时，绘制的是圆形】
fill-opacity 填充⾊透明度    stroke-opacity 轮廓线透明度 -->
<!-- 圆形元素 -->
<circle cx="100"cy="350"r="40"stroke="black"stroke-width="2"fill="red"/>
<!--  cx cy表⽰圆⼼的x,y坐标。  r表⽰圆的半径。 -->
<!-- 直线元素 -->
<line x1="0"y1="0"x2="100"y2="300"  />
<!-- <line x1="起点坐标" y1="" x2="终点坐标" y2="" /> -->
<!-- 注意：绘制直线时，默认描边颜⾊为⽩⾊ -->
<!-- 多边形元素:⽐如三⾓形 -->
<polygon points="10,150 200,150 300,550" />
<!-- points--折线中所有的点坐标，都设置在该属性中 -->
<!-- 曲线元素：折线 -->
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />
<!-- 特效元素如下：注意：线性渐变或射线渐变，设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为⼤于 100% 的值设置渐变颜⾊位置必须是百分值只能是从 0% ~ 100%----------------------------------------------------------->
<!-- 线性渐变------基准线 -->
<!-- <defs>
<linearGradient id="grad" x1="基准线的起点坐标" y1="" x2="基准线的终点坐标" y2="" >
<stop offset="0%~100%" stop-color="颜⾊" />
</linearGradient>
</defs>
<rect fill="url(#渐变元素的id)" /> -->
<!-- 线性元素实例--------------------------------------------- -->
<defs>
<!-- ⽔平渐变【垂直渐变：<linearGradient id="grad000" x1="0%" y1="0%" x2="0%" y2="100%" >】 -->
<linearGradient id="grad000"x1="0%"y1="0%"x2="100%"y2="0%">
<stop offset="0%"stop-color="red"stop-opacity="0.7"/>
<stop offset="100%" />
</linearGradient>
</defs>
<ellipse cx="800"cy="70"rx="85"ry="55"fill="url(#grad000)"/>
<!-- 放射性渐变----------------基准圆 -->
<!-- <defs>
<radialGradient id="grad" fx="起点基准圆的圆⼼x" fy="" cx="终点基准圆的圆⼼" cy="" r="终点基准圆的半径" >
<stop offset="0%~100%" stop-color="颜⾊" />
</radialGradient>
</defs>
<rect fill="url(#渐变元素的id)" /> -->
<!-- 放射性渐变--------------实例------------------------------------------- -->
<defs>
<radialGradient id="grad111"fx="50%"fy="50%"cx="50%"cy="50%"r="50%">
<stop offset="0%" />
<stop offset="100%" />
</radialGradient>
</defs>
<rect x="500"y="300"width="300"height="100"fill="url(#grad111)"/>
<!-- svg路径===================【是⼀个闭环 z关闭后，会回到起点。默认填充⿊⾊】============================================== ==== -->
<!-- M = moveto  开始移动
L = lineto  移动到
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath 关闭路径-->
<!-- 注意：以上所有命令均允许⼩写字母。⼤写表⽰绝对定位，⼩写表⽰相对定位 -->
<path d="M550 0 L475 200 L625 200 Z"fill="none"stroke="red"stroke-width="5"/>
<!-- 从150 0位置开始，到75 200，再到225 200，结束 -->
<!-- 下⾯的例⼦创建了⼀个⼆次⽅贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：================================ -->
<path id="lineAB"d="M 100 350 l 150 -300"stroke="red"
stroke-width="3"fill="none"/>
<path id="lineBC"d="M 250 50 l 150 300"stroke="red"
stroke-width="3"fill="none"/>
<path d="M 175 200 l 150 0"stroke="green"stroke-width="3"
fill="none"/>
<path d="M 100 350 q 150 -300 300 0"stroke="blue"
stroke-width="5"fill="none"/>
<!-- Mark relevant points -->
<g stroke="black"stroke-width="3"fill="black">
<circle id="pointA"cx="100"cy="350"r="3"/>
<circle id="pointB"cx="250"cy="50"r="3"/>
<circle id="pointC"cx="400"cy="350"r="3"/>
</g>
<!-- Label the points -->
<g font-size="30"font="sans-serif"fill="black"stroke="none"
text-anchor="middle">
<text x="100"y="350"dx="-30">A</text>
<text x="250"y="50"dy="-10">B</text>
渐变颜代码大全
<text x="400"y="350"dx="30">C</text>
</g>
<!-- ================================================================================================= -->
<!-- svg⽂本=============================-旋转⿊⾊⽂字============================
================================= --> <text x="0"y="15"fill="black"transform="rotate(30 20,40)">I love SVG</text>
<!-- 路径上的⽂本----------------------------- -->
<defs>
<path id="path1"d="M75,20 a1,1 0 0,0 100,0"/>
</defs>
<text x="0"y="100" >
<text x="0"y="100" >
<textPath href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- ⽂本内容分⼩组--------------------------------------------------- -->
<text x="500"y="20" >Several lines:
<tspan x="500"y="45">First line</tspan>
<tspan x="500"y="70">Second line</tspan>
</text>
<!-- 链接⽂本--------------------------------------------------------->
<a href="www.baidu"target="_blank">
<text x="800"y="215"fill="black">I love SVG</text>
</a>
<!-- 滤镜模糊--⾼斯模糊==============【注意： Internet Explorer和Safari不⽀持SVG滤镜！】========================================= ==========--->
<!-- <filter></filter>滤镜元素 -->
<!-- <feGaussianBlur></feGaussianBlur>该标签⽤于创建模糊效果 -->
<!-- 滤镜模糊效果实例------------------------------------------------------------------- -->
<defs>
<!-- filter定义⼀个滤镜的唯⼀名称 x和y表⽰什么-->
<filter id="f1"x="0"y="0">
<!-- feGaussianBlur定义模糊效果 in="SourceGraphic"表⽰由整个图像创建效果  stdDeviation定义模糊量  -->
<feGaussianBlur in="SourceGraphic"stdDeviation="15"/>
</filter>
</defs>
<rect width="90"height="90"x="500"y="500"stroke="green"stroke-width="25"fill="yellow"filter="url(#f1)"/>
<!-- filter="url(#f1)"⽤来将rect矩形元素链接到#f1滤镜 -->
<!-- 阴影效果============实例1================================================== --
>
<defs>
<filter id="ff"x="0"y="0"width="200%"height="200%">
<!-- feOffset元素创建阴影效果将svg图像在xy屏幕平移 dx dy表⽰⽔平/垂直平移量-->
<feOffset result="offOut"in="SourceGraphic"dx="20"dy="20"/>
<!-- feBlend混合偏移图像顶部 -->
<feBlend in="SourceGraphic"in2="offout"mode="normal"/>
</filter>
</defs>
<rect width="90"x="800"y="450"height="90"stroke="purple"stroke-width="5"fill="yellow"filter="url(#ff)"/>
<!-- 阴影效果----------------实例2---------------阴影变模糊----------------------------------------- -->
<defs>
<filter id="gg"x="0"y="0"width="200%"height="200%">
<feOffset result="offOut"in="SourceGraphic"dx="20"dy="20"/>
<!-- <feGaussianBlur>元素的stdDeviation属性定义模糊量 -->
<feGaussianBlur result="blurOut"in="offOut"stdDeviation="10"/>
<!-- 混合 -->
<feBlend in="SourceGraphic"in2="blurOut"mode="normal"/>
</filter>
</defs>
<rect width="90"x="800"y="650"height="90"stroke="green"stroke-width="3"fill="yellow"filter="url(#gg)"/>
<!-- 阴影效果---------------实例3-------------制作⿊⾊阴影---------------------------------- -->
<defs>
<filter id="kk"x="0"y="0"width="200%"height="200%">
<!-- in="SourceAlpha"表⽰在Alpha通道使⽤残影，⽽不是整个rgba像素 -->
<feOffset result="offOut"in="SourceAlpha"dx="20"dy="20"/>
<!-- 定义模糊量 -->
<feGaussianBlur result="blurOut"in="offOut"stdDeviation="10"/>
<!-- 混合 -->
<feBlend in="SourceGraphic"in2="blurOut"mode="normal"/>
</filter>
</defs>
<rect width="90"x="800"y="800"height="90"stroke="green"stroke-width="3"fill="yellow"filter="url(#kk)"/>
<!-- 阴影效果-------------实例4-------------给阴影设置颜⾊-------------------------------------------- -->
<!-- 阴影效果-------------实例4-------------给阴影设置颜⾊-------------------------------------------- -->
<defs>
<filter id="xx"x="0"y="0"width="200%"height="200%">
<feOffset result="offOut"in="SourceGraphic"dx="20"dy="20"/>
<!-- <feColorMatrix>过滤器是⽤来转换偏移的图像使之更接近⿊⾊的颜⾊。 '0.2'矩阵的三个值都获取乘以红⾊，绿⾊和蓝⾊通道。降低其值带来的颜⾊⾄⿊⾊（⿊⾊为0） -->
<feColorMatrix
result="matrixOut"in="offOut"type="matrix"
values="0.2  0    0    0  0
0    0.2  0    0  0
0    0    0.2  0  0
0    0    0    1  0"/>
<!-- 定义模糊量 -->
<feGaussianBlur result="blurOut"in="matrixOut"stdDeviation="10"/>
<!-- 混合 -->
<feBlend in="SourceGraphic"in2="blurOut"mode="normal"/>
</filter>
</defs>
<rect width="90"x="850"y="300"height="90"stroke="green"stroke-width="3"fill="yellow"filter="url(#xx)"/>
</svg>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。