1# SVG标签说明 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyujie43--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9SVG（Scalable Vector Graphics）是可缩放矢量图形，它是一种基于XML（可扩展标记语言）的图形格式，用于描述二维图形和图像。Image组件支持的SVG范围，为SVG1.1规范的部分功能。支持的标签以及属性如下： 10 11## 基础形状 12 13基础形状标签包括：\<rect\>、\<circle\>、\<ellipse\>、\<line\>、\<polyline\>、\<polygon\>和\<path\>。 14 15> **说明：** 16> 17> 基础标签支持通用属性 18> id、fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、opacity、transform、clip-path、clip-rule，其中transform属性只支持平移。 19 20| 元素 | 说明 | 特有属性 | 21| :-------- | :-------- | :-------- | 22| \<rect\> | 矩形 | x：x轴方向偏移分量； <br>y：y轴方向偏移分量；<br>width：宽度； <br>height：高度；<br>rx：圆角x轴半径； <br>ry：圆角y轴半径。| 23| \<circle\> | 圆形 | cx：圆心x轴坐标；<br> cy：圆心y轴坐标；<br> r：圆形半径。 | | 24| \<ellipse\> | 椭圆 | cx：x轴坐标；<br> cy：y轴坐标；<br> rx：x轴半径；<br> ry：y轴半径。 | | 25| \<line\> | 线 | x1：起点x轴坐标；<br> y1：起点y轴坐标；<br> x2：终点x轴坐标；<br> y2：终点y轴坐标。 | | 26| \<polyline\> | 折线 | points：顶点坐标。 | | 27| \<polygon\> | 多边形 | points：顶点坐标。 | | 28| \<path\> | 路径 | d：路径。 | | 29 30SVG基础形状标签与支持的通用属性的示例如下。 31 32``` 33<!-- svg01.svg --> 34<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" style="background:#f0f0f0"> 35 <!-- 1. <rect> 矩形 --> 36 <rect x="50" y="50" width="100" height="60" 37 id="myRect" 38 fill="#4CAF50" 39 stroke="#333" 40 stroke-width="4" 41 stroke-dasharray="10,5" 42 stroke-linecap="round" 43 opacity="0.9" 44 transform="translate(1,0)"/> 45 46 <!-- 2. <circle> 圆形 --> 47 <circle cx="200" cy="100" r="50" 48 id="myCircle" 49 fill="none" 50 stroke="#FF5722" 51 stroke-width="6" 52 stroke-linejoin="bevel" 53 fill-opacity="0.7" 54 stroke-opacity="0.9" 55 transform="translate(30,0)"/> 56 57 <!-- 3. <ellipse> 椭圆 --> 58 <ellipse cx="350" cy="100" rx="70" ry="40" 59 id="myEllipse" 60 fill="#2196F3" 61 fill-rule="evenodd" 62 stroke="#000" 63 stroke-width="3" 64 opacity="0.8" 65 transform="translate(20,0)"/> 66 67 <!-- 4. <line> 直线 --> 68 <line x1="50" y1="200" x2="350" y2="200" 69 stroke="#9C27B0" 70 stroke-width="5" 71 stroke-dasharray="8,4" 72 stroke-linecap="square" 73 transform="translate(0,100)"/> 74 75 <!-- 5. <polyline> 折线（开放路径） --> 76 <polyline points="50,250 100,220 150,270 200,240 250,280" 77 fill="none" 78 stroke="#FFC107" 79 stroke-width="4" 80 stroke-linejoin="round" 81 opacity="0.9" 82 transform="translate(0,100)"/> 83 84 <!-- 6. <polygon> 多边形（闭合路径） --> 85 <polygon points="400,100 450,50 500,100 450,150" 86 id="myPolygon" 87 fill="#E91E63" 88 fill-rule="nonzero" 89 stroke="#333" 90 stroke-width="3" 91 stroke-dasharray="6,3" 92 fill-opacity="0.8" 93 transform="translate(-350,80)"/> 94 95 <!-- 7. <path> 路径（复杂图形） --> 96 <path d="M550,100 C600,50 700,50 750,100 S800,150 750,200 Z" 97 fill="#00BCD4" 98 fill-rule="evenodd" 99 stroke="#009688" 100 stroke-width="4" 101 stroke-opacity="0.7" 102 transform="translate(-300,90)"/> 103</svg> 104``` 105 106``` ts 107//xxx.ets 108@Entry 109@Component 110struct Index { 111 build() { 112 Column() { 113 // $r('app.media.svg01')需要替换为开发者所需的图像资源文件。 114 Image($r('app.media.svg01')) 115 .objectFit(ImageFit.None) 116 .width('100%') 117 .height('100%') 118 }.width('100%').height('100%') 119 } 120} 121``` 122 123 124 125## 图形效果 126 127### 滤镜 128 129滤镜标签包括：\<filter\>、\<feOffset\>、\<feGaussianBlur\>、\<feBlend\>、\<feComposite\>、\<feColorMatrix\>、\<feFlood\>。其中，\<filter\>定义滤镜范围，其它标签定义滤镜效果。 130 131| 元素 | 说明 | 特有属性 | 132| :-------- | :-------- | :-------- | 133| \<filter\> | 定义滤镜 | x：滤镜区域x轴偏移分量，默认值为0； <br>y：滤镜区域y轴偏移分量，默认值为0； <br>width：滤镜区域宽； <br>height：滤镜区域高。 | 134| \<feOffset\> | 定义沿x、y方向偏移距离 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）;<br> result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，dx和dy。 | 135| \<feGaussianBlur\> | 定义高斯模糊效果 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）;<br> result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，edgemode和stddeviation。 | 136| \<feBlend\> | 定义两张输入图像混合模式 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）;<br> result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入；<br>in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），mode。 | 137| \<feComposite\> | 定义两张输入图像合成方式，<br>算法：result = k1 * in * in2 + k2 * in + k3 * in2 + k4 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）；<br>in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），operator( over \| in \| out \| atop \| xor \| lighter \| arithmetic )，k1，k2，k3，k4。 | 138| \<feColorMatrix\> | 基于转换矩阵对颜色进行变换 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）；<br> result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入；<br>type ( matrix \| saturate \| hueRotate)、 values。 | 139| \<feFlood\> | 定义填充颜色和透明度 | in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）；<br> result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入；flood-color和flood-opacity。 | 140 141### 遮罩 142 143遮罩标签：\<mask\> 144| 元素 | 说明 | 特有属性 | 145| :-------- | :-------- | :-------- | 146| \<mask\> | 定义遮罩 | x：遮罩区域x轴偏移分量； <br>y：遮罩区域y轴偏移分量； <br>width：遮罩区域宽； <br>height：遮罩区域高。 | 147 148### 裁剪 149 150裁剪标签：\<clippath\> 151| 元素 | 说明 | 特有属性 | 152| :-------- | :-------- | :-------- | 153| \<clippath\> | 定义一条剪切路径 | x：裁剪区域x轴偏移分量；<br>y：裁剪区域y轴偏移分量； <br>width：裁剪区域宽； <br>height：裁剪区域高。 | 154 155### 图案 156 157裁剪标签：\<pattern\> 158| 元素 | 说明 | 特有属性 | 159| :-------- | :-------- | :-------- | 160| \<pattern\> | 定义填充图案 | x：填充区域x轴偏移分量； <br>y：填充区域y轴偏移分量； <br>width：填充区域宽； <br>height：填充区域高。 | 161 162### 渐变色 163 164渐变色相关的标签包括：\<linearGradient\>、\<radialGradient\>、\<stop\> 165 166| 元素 | 说明 | 特有属性 | 167| :-------- | :-------- | :-------- | 168| \<linearGradient\> | 线性渐变 | x1、y1、x2、y2 | 169| \<radialGradient\> | 放射渐变 | fx、fy、cx、cy、r | 170| \<stop\> | 色阶 | offset、stop-color | 171 172## 静态图片 173 174图片标签：\<image\> 175| 元素 | 说明 | 特有属性 | 176| :-------- | :-------- | :-------- | 177| \<image\> | 用于图像显示 | x：图像x轴偏移；<br> y：图像y轴偏移；<br> width：图像宽；<br> height：图像高；<br> href：目标图片(支持：jpg、jpeg、png、bmp、webp、heic、base64，不支持svg)。 | 178 179## 动画 180 181动画标签：\<animate\>、\<animateTransform\> 182| 元素 | 说明 | 特有属性 | 183| :-------- | :-------- | :-------- | 184| \<animate\> | 定义元素属性动画 | attributeName：定义可动画属性，取值：( cx \| cy \| r \| fill \| stroke \| fill-opacity \| stroke-opacity \| stroke-miterlimit )；<br>begin：定义动画起始时间；<br> dur：定义动画持续时间；<br>from：定义起始值；<br>to：定义结束值；<br>fill：定义动画结尾状态；<br> calcMode：定义插值；<br>keyTimes：设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一。<br> values：设置一组动画的变化值。格式为value1;value2;value3。<br> keySplines：与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制点格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1| 185| \<animateTransform\> | 定义元素变形动画 | attributeName： 定义可动画属性，取值：transform；<br/>type：属性定义转换类型取值：( translate \| scale \| rotate \| skewX \| skewY )；<br>begin：定义动画起始时间；<br> dur：定义动画持续时间；<br>from：定义起始值；<br>to：定义结束值；<br>fill：定义动画结尾状态；<br> calcMode：定义插值；<br>keyTimes：设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一。<br> values：设置一组动画的变化值。格式为value1;value2;value3。<br> keySplines：与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制点格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1| 186 187**说明：** 当前仅支持单个元素的属性动画或者变形动画，不支持元素间动画嵌套。 188## 其它 189 190除了标识图形图像效果的标签，还支持分组等标签，分别有： 191\<svg\>、\<g\>、\<use\>和\<defs\> 192 193| 元素 | 说明 | 特有属性 | 通用属性 | 194| :-------- | :-------- | :-------- | :-------- | 195| \<svg\> | 容器，定义个svg片段 | x：x轴偏移分量；<br> y：y轴偏移分量；<br> width：宽度； <br>height：高度；<br> viewBox：视口| fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform | 196| \<g\> | 分组 | x：x轴偏移分量；<br> y：y轴偏移分量；<br> width：宽度；<br> height：高度 | fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform | 197| \<use\> | 复用已有元素 | x：x轴偏移分量；<br> y：y轴偏移分量；href：目标元素 | fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform | 198| \<defs\> | 定义可复用对象 | | | 199 200>**说明：** 201> 202> 当前支持的颜色值格式包括#rgb、#rrggbb、rgb()、rgba()，以及常用颜色关键字（如red、black、blue等）。
