harmony 鸿蒙SVG标签说明

2025-06-12
浏览 (6)

SVG标签说明

SVG（Scalable Vector Graphics）是可缩放矢量图形，它是一种基于XML（可扩展标记语言）的图形格式，用于描述二维图形和图像。Image组件支持的SVG范围，为SVG1.1规范的部分功能。支持的标签以及属性如下：

基础形状

基础形状标签包括：<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>和<path>。

说明：

基础标签支持通用属性 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

元素	说明	特有属性
<rect>	矩形	x：x轴方向偏移分量； y：y轴方向偏移分量； width：宽度； height：高度； rx：圆角x轴半径； ry：圆角y轴半径。
<circle>	圆形	cx：圆心x轴坐标； cy：圆心y轴坐标； r：圆形半径。
<ellipse>	椭圆	cx：x轴坐标； cy：y轴坐标； rx：x轴半径； ry：y轴半径。
<line>	线	x1：起点x轴坐标； y1：起点y轴坐标； x2：终点x轴坐标； y2：终点y轴坐标。
<polyline>	折线	points：顶点坐标。
<polygon>	多边形	points：顶点坐标。
<path>	路径	d：路径。

图形效果

滤镜

滤镜标签包括：<filter>、<feOffset>、<feGaussianBlur>、<feBlend>、<feComposite>、<feColorMatrix>、<feFlood>。其中，<filter>定义滤镜范围，其它标签定义滤镜效果。

元素	说明	特有属性
<filter>	定义滤镜	x：滤镜区域x轴偏移分量，默认值为0； y：滤镜区域y轴偏移分量，默认值为0； width：滤镜区域宽； height：滤镜区域高。
<feOffset>	定义沿x、y方向偏移距离	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，dx和dy。
<feGaussianBlur>	定义高斯模糊效果	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入，edgemode和stddeviation。
<feBlend>	定义两张输入图像混合模式	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）; result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入； in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），mode。
<feComposite>	定义两张输入图像合成方式，算法：result = k1 * in * in2 + k2 * in + k3 * in2 + k4	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； in2：第二图源（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result），operator( over \|in \|out \|atop \|xor \|lighter \|arithmetic )，k1，k2，k3，k4。
<feColorMatrix>	基于转换矩阵对颜色进行变换	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入； type ( matrix \|saturate \|hueRotate)、 values。
<feFlood>	定义填充颜色和透明度	in：滤镜原始输入（仅支持SourceGraphic、SourceAlpha、其它滤镜效果的result）； result：经过滤镜处理之后的输出，可以作为下一个滤镜的输入；flood-color和flood-opacity。

遮罩

遮罩标签：<mask> |元素|说明|特有属性| |:——–|:——–|:——–| |<mask>|定义遮罩|x：遮罩区域x轴偏移分量；
y：遮罩区域y轴偏移分量；
width：遮罩区域宽；
height：遮罩区域高。|

裁剪

裁剪标签：<clippath> |元素|说明|特有属性| |:——–|:——–|:——–| |<clippath>|定义一条剪切路径|x：裁剪区域x轴偏移分量；
y：裁剪区域y轴偏移分量；
width：裁剪区域宽；
height：裁剪区域高。|

图案

裁剪标签：<pattern> |元素|说明|特有属性| |:——–|:——–|:——–| |<pattern>|定义填充图案|x：填充区域x轴偏移分量；
y：填充区域y轴偏移分量；
width：填充区域宽；
height：填充区域高。|

渐变色

渐变色相关的标签包括：<linearGradient>、<radialGradient>、<stop>

元素	说明	特有属性
<linearGradient>	线性渐变	x1、y1、x2、y2
<radialGradient>	放射渐变	fx、fy、cx、cy、r
<stop>	色阶	offset、stop-color

静态图片

图片标签：<image> |元素|说明|特有属性| |:——–|:——–|:——–| |<image>|用于图像显示|x：图像x轴偏移；
y：图像y轴偏移；
width：图像宽；
height：图像高；
href：目标图片(支持：jpg、jpeg、png、bmp、webp、heic、base64，不支持svg)。|

动画

说明： 当前仅支持单个元素的属性动画或者变形动画，不支持元素间动画嵌套。

其它

除了标识图形图像效果的标签，还支持分组等标签，分别有： <svg>、<g>、<use>和<defs>

元素	说明	特有属性	通用属性
<svg>	容器，定义个svg片段	x：x轴偏移分量； y：y轴偏移分量； width：宽度； height：高度； viewBox：视口	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
<g>	分组	x：x轴偏移分量； y：y轴偏移分量； width：宽度； height：高度	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
<use>	复用已有元素	x：x轴偏移分量； y：y轴偏移分量；href：目标元素	fill、fill-rule、fill-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-opacity、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、transform
<defs>	定义可复用对象