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',
    },
上一篇下一篇

猜你喜欢

热点阅读