SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）

一、SVG常用属性

1.fill: 修改填充颜色
2.fill-opacity: 0~1 设置填充颜色的透明度
3.stroke: 修改描边颜色
4.stroke-width: 修改描边宽度
5.stroke-opacity: 0~1 设置描边透明度
6.stroke-linecap: butt(两边都没有)/square（两边为方块）/round （两边为圆形）设置线段两端帽子
7.stroke-dasharray: 设置虚线
8.stroke-dashoffset: 设置虚线偏移位
整数：往左边偏移
负数：往右边偏移
9.stroke-linejoin: miter（直角）/bevel（切角）/round（圆角）设置折线转角样式

注意点：在SVG这些所有的常用属性都可以直接在CSS中使用的。

<svg width="500" height="500"><rect x="100" y="0" width="50" height="50" fill="#aef"></rect><rect x="100" y="0" width="50" height="50" fill="#aef"></rect><rect x="100" y="55" width="50" height="50" fill="#aef" fill-opacity="0.2"></rect><line x1="100" y1="110" x2="200" y2="110" stroke="#aef"></line><line x1="100" y1="130" x2="200" y2="130" stroke="#aef" stroke-width="10"></line><line x1="100" y1="150" x2="200" y2="150" stroke="#aef" stroke-width="10" stroke-opacity="0.5"></line><line x1="100" y1="170" x2="200" y2="170" stroke="#aef" stroke-width="10" stroke-linecap="butt"></line><line x1="100" y1="190" x2="200" y2="190" stroke="#aef" stroke-width="10" stroke-linecap="square"></line><line x1="100" y1="230" x2="200" y2="230" stroke="#aef" stroke-width="10" stroke-dasharray="10 20"></line><line x1="100" y1="250" x2="200" y2="250" stroke="#aef" stroke-width="10" stroke-dasharray="10" stroke-dashoffset="15"></line><line class="line" x1="200" y1="270" x2="250" y2="270"></line><polyline points="300 50 400 50 400 100" stroke="#aef" stroke-width="10" stroke-linejoin="miter"></polyline><polyline points="300 160 400 160 400 260" stroke="#aef" stroke-width="10" stroke-linejoin="round"></polyline><polyline points="300 270 400 270 400 370" stroke="#aef" stroke-width="10" stroke-linejoin="bevel"></polyline>
</svg>

二、绘制路径

1.什么是SVG路径
SVG路径老牛了, 可以绘制任意图形, 只不过比较复杂而已
2.绘制直线
M = moveto 起点
L = lineto 其它点
H = horizontal lineto 当前点的Y和上一个点Y相等
V = vertical lineto 当前点的X和上一个点X相等
Z = closepath 关闭当前路径
- 路径指令注意点
  大写字母是绝对定位, 小写字母是相对定位
  绝对定位: 写什么位置就是什么位置
  相对定位: 相对上一次的位置, 在上一次位置基础上做调整

<svg width="500" height="500"><!--直线--><path d="M 100 10 L 300 10" stroke="#adc" stroke-width="5"></path><path d="M 100 200 l 300 200" stroke="#adc" stroke-width="5"></path>//相对位置。<!--折线--><path d="M 100 20 L 300 20 L 300 60" stroke="#adc" fill="none" stroke-width="5"></path><!--绘制简单图形--><path d="M 100 80 L 200 80 L 200 100 Z" stroke="#adc" fill="none" stroke-width="5"></path><path d="M 100 150 H 200 V 200 Z" stroke="#adc" fill="none" stroke-width="5"></path></svg>

3、绘制圆弧
A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
rx (radiux-x): 弧线X半径
ry (radiux-y): 弧线Y半径
xr (xAxis-rotation): 弧线所在椭圆旋转角度
laf(large-arc-flag): 是否选择弧长较长的那一段
sf (sweep-flag): 是否顺时针绘制
x,y: 弧的终点位置

    <path d="M 100 20 A 100 50 0 0 0 200 80" stroke="#afc" fill="none" stroke-width="5"></path><path d="M 100 140 A 100 50 0 1 0 200 200" stroke="#afc" fill="none" stroke-width="5"></path><path d="M 100 260 A 100 50 0 0 1 200 320" stroke="#afc" fill="none" stroke-width="5"></path><path d="M 100 380 A 100 50 0 1 1 200 440" stroke="#afc" fill="none" stroke-width="5"></path>

S = smooth curveto
S(x2, y2, x, y) 从当前位置光滑的绘制三次贝塞尔曲线到指定位置

T = smooth quadratic Bézier curveto
T(x, y) 从当前位置光滑的绘制二次贝塞尔曲线到指定位置

4、绘制贝塞尔曲线
4.1、什么是贝塞尔曲线（理解贝塞尔曲线）
4.2、贝塞尔曲线应用场景：水滴形变效果
4.3、绘制：Q = quadratic Bézier curve
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: 终点位置

<path d="M 100 100 Q 150 50 200 100" stroke="#adf" fill="none"></path><!--二次-->
<path d="M 200 200 C 200 100 200 50 300 100" stroke="#adf" fill="none"></path><!--三次-->

5.绘制路径文本
绘制路径文本步骤
1.定义一个路径。
2.使用dets隐藏路径
3.使用textPath标签告诉文字，使用哪一个路径绘制。
注意点：若绘制路径文本，那么超出路径范围的文本不会被绘制出来

<svg width="500" height="500"><defs><path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="#adc" fill="none"></path></defs><text><textPath xlink:href="#myPath">知道啦!!!</textPath></text>
</svg>

三、绘制文本

3.1.绘制文本标签：text
3.2.绘制文本属性：
x/y:绘制位置（默认以文字的左下角作为参考点）
style:
font-size:文字大小
fill:实心文字
stroke:空心文字
text-anchor:文字水平方向的对齐方式
start：文字最左边同参考点对齐
end：文字最右边同参考点对齐
middle：文字中间同参考点对齐
dominant-baseline:文字垂直方向的对齐方式
middle：文字中间同参考点对齐
text-after-edge：文字底部同参考点对齐
text-before-edge：文字顶部同参考点对齐
dx：指定当前文字同前一个文字水平方向的间隙
dy：指定当前文字同前一个文字垂直方向的间隙（若后面的文字没有设置，就会继承前面一个文字的垂直位置）
3.3.绘制多行文本

<text fill="yellow"><!--可以统一设置样式--><tspan x="100" y="100" fill="red">gg</tspan><!--可以分别设置样式--><tspan x="100" y="150">&</tspan><tspan x="100" y="200">jj</tspan>
</text>

四、绘制超链接

可以给任意内容添加超链接, 只需要用超链接a标签包裹起来即可
a标签使用的属性：

xlink:href: 指定链接地址
xlink:title: 指定链接提示
target: 指定打开方式

<svg width="500" height="500"><a xlink:href="链接地址" xlink:title="知道啦" target="_blank"><!--文本添加超链接--><text x="50" y="50">知道啦~~~~</text><!--圆绘制超链接--><circle cx="200" cy="200" r="50" fill="#7fa"></circle></a>
</svg>

五、绘制图片

使用image绘制图片常用属性

xlink：图片地址
width/height：图片大小
x/y：图片绘制位置
注意：
html的图片标签为img。svg的图片标签为image
默认情况下指定的图片有多大，就绘制多大
当使用width/height指定的尺寸和图片实际的尺寸不同时，高度填满，宽度等比拉伸

<svg width="500" height="500"><image xlink:href="图片地址" width="200" height="200" x="100" y="100"></image>
</svg>

六、结构标签

1.g结构元素

g是group的缩写, 可以将多个元素放到一个g标记中, 这样就组成了一个组,以便统一操作，比如旋转，缩放或者添加相关样式等
对g标记设置的所有样式都会应用到这一组所有的元素中

<svg width="500" height="500">
<!--统一设置圆的颜色:使用g--><g fill="#6df" id="myGroup"><circle cx="50" cy="50" r="50"></circle><circle cx="50" cy="100" r="30"></circle><circle cx="50" cy="150" r="15"></circle></g>
</svg>

2.use

g结构元素封装的图形还可以通过元素进行复制使用
xlink:href=""：复用谁？

<svg width="500" height="500"><!--复用g标签的元素--><g id="myGroup"><circle cx="50" cy="50" r="50"></circle><circle cx="50" cy="100" r="30"></circle><circle cx="50" cy="150" r="15"></circle></g><use xlink:href="#myGroup" x="200" fill="#4fa"></use>
</svg>

3.defs

g封装的元素默认是可见的, 如果仅仅是需要定义一组模板, 将来需要用到时候才显示, 那么就可以使用defs

<svg width="500" height="500"><!--g标签的元素默认不显示--><defs><g id="myGroup"><circle cx="50" cy="50" r="50"></circle><circle cx="50" cy="100" r="30"></circle><circle cx="50" cy="150" r="15"></circle></g></defs><use xlink:href="#myGroup" x="50" fill="#5df"></use><use xlink:href="#myGroup" x="200" fill="#4fa"></use>
</svg>

4.symbol

symbol兼具的分组功能和初始不可见的特性,
symbol能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性。

<svg width="500" height="500"><symbol><g id="myGroup"><circle cx="50" cy="50" r="50"></circle><circle cx="50" cy="100" r="30"></circle><circle cx="50" cy="150" r="15"></circle></g></symbol><use xlink:href="#myGroup" x="50" fill="#5df"></use>
</svg>

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）相关推荐

二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
前端绝对路径不显示图片_img标签使用绝对路径无法显示图片
说明: 图片的磁盘路径斜杠使用:右斜杠"\",而图片的网络路径使用左斜杠"/",注意加以区分. 如果这张图片属于服务器图片或者网络图片,我们必须在Img标签里 ...
HTML保姆级教程（二）图像，多媒体，超链接，表格标签
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程
一.动画 1.SVG动画在SVG中提供了三种常用动画标记 animate:基础动画 animateTransform:形变动画 animateMotion:路径动画 2.SVG动画属性 attrib ...
SVG的动画属性（动画常用属性、复合动画/往返动画/形变动画/路径动画/）
一.动画 1.SVG动画在SVG中提供了三种常用动画标记 animate:基础动画 animateTransform:形变动画 animateMotion:路径动画 2.SVG动画属性 attrib ...
TextView之二：常用属性
参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）

一、SVG常用属性

二、绘制路径

三、绘制文本

四、绘制超链接

五、绘制图片

六、结构标签

1.g结构元素

2.use

3.defs

4.symbol

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）相关推荐

最新文章

热门文章

SVG基本使用（二 常用属性、绘制路径/文本/超链接/图片、结构标签）

一、SVG常用属性

二、绘制路径

三、绘制文本

四、绘制超链接

五、绘制图片

六、结构标签

1.g结构元素

2.use

3.defs

4.symbol

SVG基本使用（二 常用属性、绘制路径/文本/超链接/图片、结构标签）相关推荐

最新文章

热门文章

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）

SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）相关推荐