svgdr教程·set、sets 和 style

马黑黑 · 发表于 2024-11-20 12:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

set、sets 和 style

set()、sets() 和 style() 其实也是补充形式的指令，它们的存在主要是为了帮助主要绘制指令实现更灵活的属性补充。

一、set

指令：set()

参数：name, val

语法：set(name, val)

参数说明：

① name - 必须，字符型，指属性名，例如 'text-anchor'
② val - 必须，字符型，属性值，例如，针对 'text-anchor' 属性：'start' | 'middle' | 'end'
* set() 只能设置一个属性，例：set('text-anchor', 'middle')

二、sets

指令：sets()

参数：option

语法：sets(option)

参数说明：

① option - 一个或一组有花括号里的JS键值对，用以描述所添加的SVG属性和属性值
* 健名有短横线连接的，需要用引号，没有的不用引号；键值为纯数值的可以不用引号，字符型的必须用引号

三、style

指令：style()

参数：val

语法：style(val)

参数说明：

① val - 一个或一组有引号包裹起来的CSS键值对，用以描述所添加的CSS属性或CSS支持的SVG属性和对应属性值
* val 参数整体需要引号包裹，支持反引号`...`、小角单引号'...'和小角双引号"..."

下面以绘制文本为例，演示如何使用 set()、sets() 和 style() 指令：

//单一参数绘制文本 ：文本将不会显示，因为x、y默认为0，通过set()设置垂直悬挂对齐，文本可见
dr.text('Hello SVG').set('dominant-baseline', 'hanging');

//定位绘制文本 ：x设置为100，但由于用 sets() 指令设置了水平方向 middle 对齐，文本有一半跑到了x的左边
dr1.text('Hello SVG',100,50).sets({
	'font-size': 30,
	fill: 'blue',
	'text-anchor': 'middle',
});

//上述第二种画法的一种方式 ：style() 指令，纯CSS写法，支持部分SVG属性
dr.text('Hello SVG',100,100).style(`
	font-size: 30px;
	fill: blue;
	text-anchor: middle;
	dominant-baseline: middle;
`);

上述效果的SVG代码：

这里特别提醒，注意分清 sets() 指令和 style() 指令组织参数的区别，因为二者所使用的参数类型不同。sets() 指令使用的参数是JS Object对象，用花括号将多组键值对（健名: 键值）组织起来，各键值对之间用小角逗号隔开，健名有短横线的需要使用小角引号包裹起来，键值为字符型的一样需要引号；style() 指令使用字符型参数，整体需要引号包裹，各属性则按CSS的书写方式组织各键值对，键值对之间用小角分号隔开，健名、键值都不需要引号，同时注意，① 若需分行写，包裹整体CSS整体参数值的引号需要用反引号，不分行的反引号、小角单或双引号都行，② 纯CSS属性的，如 font-size 属性，其值若需要单位的得有单位（如 px），CSS所支持的SVG属性的，如 cx，则不要单位。

返回目录