Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 a34c8fd4 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9444 updata svg 

Merge pull request !9444 from wangshuainan1/OpenHarmony-3.1-Release
上级 0a172836 151a10dd
展开全部 隐藏空白更改
内联 并排
Showing with 179 addition and 176 deletion
zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md
浏览文件 @ a34c8fd4
# circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
圆形形状。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -30,7 +30,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
浏览文件 @ a34c8fd4
# 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -14,7 +14,7 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length]，短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel：使用斜角连接路径段；<br/>miter：使用尖角连接路径段；<br/>round：使用圆角连接路径段。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线度。<br/>square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线宽；<br/>square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 |
| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md
浏览文件 @ a34c8fd4
# ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
椭圆形状。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -31,7 +31,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md
浏览文件 @ a34c8fd4
# line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制线条。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -31,15 +31,18 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round：在路径的末端延伸半个圆，直径等于线宽
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt：不在路径两端扩展
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg>
</div>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md
浏览文件 @ a34c8fd4
# path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制路径。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md
浏览文件 @ a34c8fd4
# polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制多边形。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md
浏览文件 @ a34c8fd4
# polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制折线。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md
浏览文件 @ a34c8fd4
# rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于绘制矩形、圆角矩形。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -33,7 +33,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
浏览文件 @ a34c8fd4
......@@ -19,7 +19,7 @@
## 子组件
支持tspan、textpath、animate、animateTransform。
支持[tspan](js-components-svg-tspan.md)、[textpath](js-components-svg-textpath.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ a34c8fd4
......@@ -3,12 +3,12 @@
沿路径绘制文本。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
## 权限列表
......@@ -17,7 +17,7 @@
## 子组件
tspan。
[tspan](js-components-svg-tspan.md)。
## 属性
......@@ -26,37 +26,26 @@ tspan。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
## 示例
textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素&lt;path&gt;曲线仅做参照）
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png)
textpath与tspan组合示例与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图
startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。
```
```css
/* xxx.css */
.container {
flex-direction: row;
......@@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md
浏览文件 @ a34c8fd4
......@@ -3,12 +3,12 @@
添加文本样式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
## 权限列表
......@@ -17,43 +17,31 @@
## 子组件
支持tspan。
支持[tspan](js-components-svg-tspan.md)。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
## 示例
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg >
......@@ -73,22 +61,22 @@
</div>
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```
```css
/* xxx.css */
.container {
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
height: 1000px;
width: 1080px;
}
```
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -111,9 +99,20 @@
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
```
![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -130,7 +129,7 @@
![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -146,7 +145,7 @@
![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ a34c8fd4
......@@ -3,7 +3,7 @@
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
......@@ -15,7 +15,7 @@
## 子组件
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。
支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animateTransform.md)。
## 属性
......@@ -34,7 +34,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或