美文网首页
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 特殊属性

    边样式 节点样式 标签样式 基础样式和特殊样式 1 .支持所有原生SVG属性2 .特殊属性提供了比原生svg属性更...

  • 特殊属性

    转载须注明出处:简书@Orca_J35 当前的实现为部分对象类型添加了一些特殊的只读属性,但其中的部分属性不会出现...

  • 13-Vue特殊属性-ref

    一、Vue特殊特性 Vue的特殊属性主要有:key、ref、is、slot,ref是Vue特殊属性之一 ref:被...

  • 特殊格式和属性

    1.特殊格式 又表达结构又带着一定格式的标记。 可放多行,表达地址。不仅是将来显示在页面上,还会被浏览器认识,可以...

  • 第05章高级权限

    特殊位 suid,sgid,sticky 设置特殊权限 文件属性chattr ==================...

  • React Native之FlexBox布局

    CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性。但对于那些特殊布...

  • flex布局和传统布局有什么区别?

    传统布局,基于盒模型,依赖display属性 、position属性 、float属性。 它对于那些特殊布局非常不...

  • React Ref的使用

    React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性...

  • flex布局教程

    传统布局基于盒模型, 依赖 display属性+position属性+float属性. 它对于那些特殊布局非常不方...

  • flex布局

    布局的传统方案,基于盒模型,依赖display属性+position属性+float属性,它对于那些特殊布局非常不...

网友评论

      本文标题:20 特殊属性

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