美文网首页
20 特殊属性

20 特殊属性

作者: skoll | 来源:发表于2021-12-14 18:00 被阅读0次

    边样式

     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',
        },
    

    相关文章

      网友评论

          本文标题:20 特殊属性

          本文链接:https://www.haomeiwen.com/subject/uijqtrtx.html