svg-container
更新时间：
渲染 svg 图片，可以动态修改 svg 属性
子组件
无
属性
支持通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| src | <uri> |
- | 是 | 只支持本地 uri |
支持动态修改的属性说明：
基本图形属性
| 标签 | 属性 | 描述 | 备注 |
|---|---|---|---|
| rect | x | 横坐标 | |
| y | 纵坐标 | ||
| rx | 水平角半径 | ||
| ry | 垂直角半径 | ||
| width | 宽度 | ||
| height | 高度 | ||
| circle | cy | 圆心纵坐标 | |
| cx | 圆心横坐标 | ||
| r | 圆的半径 | ||
| ellipse | cy | 圆心纵坐标 | |
| cx | 圆心横坐标 | ||
| rx | 水平半径 | ||
| ry | 垂直半径 | ||
| line | x1 | 起点横坐标 | |
| y1 | 起点纵坐标 | ||
| x2 | 终点横坐标 | ||
| y2 | 终点纵坐标 |
渐变属性
| 标签 | 属性 | 描述 |
|---|---|---|
| <linearGradient> | x1 | 线性渐变起点横坐标 |
| y1 | 线性渐变起点纵坐标 | |
| x2 | 线性渐变终点横坐标 | |
| y2 | 线性渐变终点纵坐标 | |
| gradientUnits | 渐变作用域 | |
| spreadMethod | 渐变扩散模式 | |
| <stop> | offset | 渐变颜色位置 |
| stop-color | 渐变色 | |
| stop-opacity | 渐变透明度 |
通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| fill | <color> |
black | 否 | 使用简写属性设置元素的填充色。 |
| fill-opacity | number |
1 | 否 | 填充色的透明度，取值范围为 0 到 1，1 表示为不透明，0 表示为完全透明。 |
| fill-rule | <string> |
nonzero | 否 | nonzero:非零规则; evenodd:奇偶规则 |
| opacity | number |
1 | 否 | 元素的透明度，取值范围为 0 到 1，1 表示为不透明，0 表示为完全透明。 |
| stroke | <color> |
- | 否 | 设置形状轮廓的颜色。 |
| stroke-linejoin | <string> |
miter | 否 | 进行描边时在路径的拐角处使用的形状。bevel：使用斜角连接路径段；miter：使用尖角连接路径段；round：使用圆角连接路径段。 |
| stroke-linecap | <string> |
butt | 否 | 路径描边时在它们的结尾处使用的形状。butt：不在路径两端扩展；round：在路径的末端延伸半个圆，直径等于线度。square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。 |
| stroke-miterlimit | number |
4 | 否 | 设置将锐角绘制成斜角的极限值。 |
| stroke-opacity | number |
1 | 否 | 轮廓线条的透明度，取值范围为 0 到 1，1 表示为不透明，0 表示为完全透明。 |
| stroke-width | <length> |
1 | 否 | 设置轮廓线条的宽度。 |
样式
支持通用样式
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| setSvgAttr | Object | 设置属性 |
setSvgAttr 的参数说明
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| id | <string> |
无 | 是 | svg 元素的 ID |
| name | <string> |
无 | 是 | 属性名 |
| value | <string> |
无 | 是 | 属性值 |
示例代码：
<template>
<div>
<svg-container
id="svgId"
src="../common/svg/a.svg"
@animationEnd="animationEnd"
></svg-container>
</div>
</template>
<script>
export default {
onInit() {
this.$element('svgId').setSvgAttr({
id: 'text',
name: 'fill',
value: 'red',
})
},
animationEnd(){
console.log('animationEnd')
}
}
</script>复制代码
svg-container组件示例
基础用法
<template>
<div class="wrapper">
<svg-container
id="svgAnimate"
class="svg-container"
src="/assets/images/svg/svg-container.svg"
@animationEnd="animationEnd"
></svg-container>
<input type="button" class="btn" value="暂停" />
<input type="button" class="btn" value="恢复" />
</div>
</template>
<script>
export default {
animationEnd() {
console.log(`animation end!`)
}
}
</script>
<style>
.wrapper {
flex-direction: column;
align-items: center;
justify-content: center;
}
.svg-container {
height: 400px;
}
.btn {
width: 400px;
height: 80px;
text-align: center;
border: 1px solid #000;
margin: 5px;
}
</style>
复制代码
