1# text 2 3文本，用于呈现一段信息。 4 5 6> **说明：** 7> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。 10> 11> - 只支持被父元素标签svg嵌套。 12> 13> - 只支持默认字体sans-serif。 14 15## 权限列表 16 17无 18 19 20## 子组件 21 22支持[tspan](js-components-svg-tspan.md)、[textpath](js-components-svg-textpath.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。 23 24 25## 属性 26 27支持以下表格中的属性。 28 29| 名称 | 类型 | 默认值 | 必填 | 描述 | 30| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | 31| id | string | - | 否 | 组件的唯一标识。 | 32| x | <length>\|<percentage> | 0 | 否 | 设置组件左上角x轴坐标 | 33| y | <length>\|<percentage> | 0 | 否 | 设置组件左上角y轴坐标 | 34| dx | <length>\|<percentage> | 0 | 否 | 设置文本x轴偏移 | 35| dy | <length>\|<percentage> | 0 | 否 | 设置文本y轴偏移 | 36| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针 | 37| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | 38| fill | <color> | black | 否 | 字体填充颜色 | 39| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | 40| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | 41| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | 42| stroke-width | number | 1px | 否 | 字体边框宽度 | 43| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | 44 45 46## 示例 47 48```css 49/* xxx.css */ 50.container { 51 flex-direction: row; 52 justify-content: flex-start; 53 align-items: flex-start; 54 height: 1000px; 55 width: 1080px; 56} 57``` 58 59```html 60<!-- xxx.hml --> 61<div class="container"> 62 <svg> 63 <text x="20px" y="0px" font-size="30" fill="blue">test x|y</text> 64 <text x="150" y="15" font-size="30" fill="blue">test x|y</text> 65 <text x="300" y="30" font-size="30" fill="blue" opacity="0.1">test opacity</text> 66 <text dx="20" y="30" dy="50" fill="blue" font-size="30">test dx|dy|fill|font-size</text> 67 <text x="20" y="150" fill="blue" font-size="30" fill-opacity="0.2">test fill-opacity</text> 68 <text x="20" y="200" fill="red" font-size="40">test 0123456789</text> 69 <text x="20" y="250" fill="red" font-size="40" fill-opacity="0.2">test 中文</text> 70 <text x="20" y="300" rotate="30" fill="red" font-size="40">test rotate</text> 71 <text x="20" y="350" fill="blue" font-size="40" stroke="red" stroke-width="2">test stroke</text> 72 <text x="20" y="400" fill="white" font-size="40" stroke="red" stroke-width="2" stroke-opacity="0.5">test stroke-opacity</text> 73 </svg> 74</div> 75``` 76 77 78 79属性动画示例 80 81```css 82/* xxx.css */ 83.container { 84 flex-direction: row; 85 justify-content: flex-start; 86 align-items: flex-start; 87 height: 3000px; 88 width: 1080px; 89} 90``` 91 92```html 93<!-- xxx.hml --> 94<div class="container"> 95 <svg> 96 <text y="50" font-size="30" fill="blue"> 97 text attribute x|opacity|rotate 98 <animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate> 99 <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 100 <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate> 101 </text> 102 </svg> 103</div> 104``` 105 106 107 108```html 109<!-- xxx.hml --> 110<div class="container"> 111 <svg> 112 <text x="20" y="200" fill="blue"> 113 text attribute font-size 114 <animate attributeName="font-size" from="10" to="50" dur="3s" repeatCount="indefinite"> 115 </animate> 116 </text> 117 </svg> 118</div> 119``` 120 121 122 123```html 124<!-- xxx.hml --> 125<div class="container"> 126 <svg> 127 <text x="20" y="250" font-size="25" fill="blue" stroke="red"> 128 text attribute stroke 129 <animate attributeName="stroke" from="red" to="#00FF00" dur="3s" repeatCount="indefinite"></animate> 130 </text> 131 <text x="300" y="250" font-size="25" fill="white" stroke="red"> 132 text attribute stroke-width-opacity 133 <animate attributeName="stroke-width" from="1" to="5" dur="3s" repeatCount="indefinite"></animate> 134 <animate attributeName="stroke-opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate> 135 </text> 136 </svg> 137</div> 138``` 139 140 141
