web.jpeg
图片的认知
- 分为：
位图和矢量图 - 位图
-
位图是有一个个小方块组合的图片,一个小方块代表1px - 比如：jpg,png,gif等都是位图
- 优点：色彩逼真，缺点是：图片放大容易失真
-
- 矢量图
- 矢量图是用
XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片 - 优点:放大不失真，缺点:绘制起来比较复杂
- 矢量图是用
SVG 标签绘制矢量图
- SVG英文全称为
Scalable Vector Graphics，意思为可缩放的矢量图 - 默认是有宽度（300）和高度(150)的
- 可以通过
css样式设置宽高，也可以通过行内样式设置
SVG 绘制直线
- x1/y1设置起点
- x2/y2设置终点
<svg>
<line x1="100" y1="100" x2="100" y2="400" stroke="#ccc"></line>
</svg>
SVG 绘制直线折线
polyline- points:设置所有的点
<svg>
<polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>
</svg>
SVG 绘制多边形
-
polygon的标签
<svg>
<polygon points="100 100 300 100 300 300" stroke="red"></polygon>
</svg>
SVG 绘制矩形
rect-
x/y是秒点的位置 -
width/height宽度和高度 -
fill:填充的颜色 -
stroke:描边颜色 -
stroke-width:描边的宽度 -
rx/ry设置圆角半径
<svg>
<rect x="100" y="100" width="100" height="100" fill="red" stroke="blue" stroke-width="10" rx="10"></rect>
</svg>
SVG 绘制圆和椭圆
- 根据绘制矩形的
rx/ry的修改 - 圆形
<svg>
<rect x="100" y="100" width="100" height="100" fill="red" stroke="blue" rx="50"></rect>
</svg>
-
circle绘制圆 -
ellipse绘制椭圆
<svg>
<!--绘制圆-->
<circle cx="100" cy="100" r="50"></circle>
<!--绘制椭圆-->
<ellipse cx="200" cy="200" rx="100" ry="50"></ellipse>
</svg>
SVG中一些常用的属性
fill:修改填充颜色
fill-opacity:0~1 设置填充颜色的透明度
stroke:修改描边颜色
stroke-width:修改描边宽度
stroke-opacity: 0~1设置描边透明度
stroke-linecap: butt/square/round设置线段两端帽子
stroke-dasharray:设置虚线
stroke-dashoffset:设置虚线偏移位
stroke-linejoin: miter/bevel/round设置折线转角样式
SVG绘制路径
- SVG的路径
M = 起点L = 其他点H = 和上一个点Y相等V = 和上一个点X相等Z = 关闭当前路径
<svg>
<!--绘制路径直线-->
<path d="M 100 100 L 200 100" stroke="red"></path>
<!--绘制折线-->
<path d="M 50 50 L 300 100 L 300 300" stroke="blue" fill="none"></path>
<!-- 关闭路径-->
<path d="M 70 70 L 210 200 L 210 70 Z" stroke="red" fill="none"></path>
<!---->
<path d="M 50 250 H 200 V 70 Z" stroke="blue" fill="none"></path>
</svg>
image.png
SVG绘制圆弧
A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
-
rx:圆弧X半径 -
ry:圆弧Y半径 -
xr:弧线所在的椭圆旋转的角度 -
laf:是否选择弧长较长的一段 0是较短 1是较长 -
sf:是否是顺时针 0是逆时针 1是顺时针 -
x/y: 弧的终点位置
<svg width="500" height="500">
<path d="M 100 100 A 100 50 0 1 0 200 150" stroke="red" fill="none"></path>
</svg>
image.png
SVG 贝塞尔曲线
Q(x1, y1, x, y) 从当前位置绘制二阶贝塞尔曲线到指定位置
- x1,y1: 控制点位置
- x,y: 终点位置
C = curveto
- C(x1, y1, x2, y2, x, y) 从当前位置绘制三阶贝塞尔曲线到指定位置
- x1, y1: 控制点1位置
- x2, y2: 控制点2位置
- x, y: 终点位置
<svg width="500" height="500">
<!--二阶贝塞尔-->
<path d="M 100 300 Q 150 50 300 300" stroke="red" stroke-width="5" fill="none"></path>
<!--三界贝塞尔-->
<path d="M100 140 C 100 50 250 150 260 100" stroke="red" stroke-width="5" fill="none"></path>
</svg>
image.png
SVG绘制文字
svg是以做下角作为参考,默认的文字的基线和指定的位置对齐
-
text标签- x/y 指定绘制文字的开始位置
- style:文字的样式
- text-anchor: 指定文字水平方向对齐方式
- dominant-baseline: 指定文字垂直方向对齐方式
- dx/dy: 相对于前一个文字位置, 未设置位置的文字会继承前一个文字
<svg width="500" height="500">
<line x1="250" y1="0" x2="250" y2="500" stroke="red" ></line>
<line x1="0" y1="250" x2="500" y2="250" stroke="red" ></line>
<text x="250" y="250" style="font-size: 40px;" text-anchor="start" dx="10 20">掠食龙</text>
<!--
text-anchor: 是以位置点 为参考
start:文字开始的位置在 绘制点
end：文字结束的位置在 绘制点
middle:文字中的位置 在绘制点
-->
</svg>
image.png
SVG绘制文字路径
-
defs定义一个不可见的模块区域 -
textPath标签是 上面的文字 会根据defs里面定义的路径绘制
<svg width="500" height="500">
<!--定义文本的绘制路径-->
<defs>
<path id="textPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
</defs>>
<!--绘制文字-->
<text>
<!--文字路劲-->
<textPath xlink:href="#textPath">这是一个绘制的文字按照路径绘制123</textPath>
</text>
</svg>
image.png
SVG绘制超链接
<svg width="500" height="500" >
<a xlink:href="http://www.baidu.com" xlink:title="官网" target="_blank">
<!--文字-->
<text x="100" y="100">百度爷爷</text>
<!--图形-->
<circle cx="200" cy="200" r="50" fill="red" ></circle>
</a>
</svg>
SVG线性渐变
- linearGradient 线性渐变
-
x1/y1:渐变范围开始位置 -
x2/y2:渐变范围结束位置 - 默认情况下是按照当前元素的百分比
不过可以通过 gradientUnits 修改 -
gradientUnits="objectBoundingBox"默认 -
gradientUnits="userSpaceOnUse"使用像素
-
<svg width="500" height="500">
<!--百分比渐变-->
<linearGradient id="myline" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="red"></stop>
<stop offset="1" stop-color="green"></stop>
</linearGradient>
<!--访问-->
<rect x="100" y="100" width="300" height="100" fill="url(#myline)"></rect>
<!--像素渐变-->
<linearGradient id="mypx" x1="200" y1="200" x2="400" y2="200" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="red"></stop>
<stop offset="1" stop-color="green"></stop>
</linearGradient>
<!--绘制矩形-->
<rect x="100" y="260" width="300" height="100" fill="url(#mypx)"></rect>
</svg>
image.png
SVG绘制图片
-
xlink:href访问图片的地址
<svg>
<image xlink:href="images/1.gif"></image>
</svg>
