20 特殊属性
2021-12-14 本文已影响0人
skoll
边样式
line:{
stroke:"#7c68fc",
}
节点样式
body:{
//整个图形的样式,代表rect元素
stroke:"#237804",
fill:"#eee",
rx:10
//边的圆角
},
标签样式
attrs:{
//图形的样式
label:{
//文字的样式,代表text元素
text:"新文字",
fill:"#333",
//文字颜色
fontSize:24,
//文字颜色
},
}
基础样式和特殊样式
1 .支持所有原生SVG属性
2 .特殊属性提供了比原生svg属性更加灵活和强大的功能,在应用属性时,原生属性被直接传递给对应的元素,特殊属性则被进一步加工处理,转为浏览器认识的原生属性后,在传递给对应的元素
3 .相对大小和相对位置,SVG的特殊力量
1 .已ref为前缀的特殊属性,可以通过这些属性来为元素设置相对大小.这些属性都是基于节点/边的数据大小.
2 .所有计算都不依赖于浏览器的bbox计算,所以不存在任何性能问题
3 .refX:相对于父元素的X的位置
label: {
refX: 0.5,
refY: '100%',
refY2: -8,
//这个属性文档里面好像没有
//在原来的基础上再次进行的操作,先向下100%,再向上8px
textAnchor: 'middle',
textVerticalAnchor: 'bottom',
},