线性渐变
使用时包含在<svg>标签内
<linearGradient>可用来定义 SVG 的线性渐变。
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | none | 用来引用该渐变 | |
| x1 | none | 渐变开始坐标的x坐标 | |
| y1 | none | 渐变开始坐标的y坐标 | |
| x2 | none | 渐变结束坐标的x坐标 | |
| y2 | none | 渐变结束坐标的y坐标 | |
| spreadMethod | none | 定义了渐变是如何扩展到其他位置的 |
spread的有效值
| 值 | 说明 |
|---|---|
| pad | 使用渐变的颜色节点来填充剩余颜色 |
| reflect | 映射渐变图案，从'start-to-end'，再从'end-to-start'， 然后'start-to-end'，直到空间都填满了。 |
| repeat | 重复渐变图案，从起点->终点，直到空间填满。 |
代码事例
<template>
<div class="page">
<navbar back="true" title="gradient"></navbar>
<scroller class="main">
<text class="desc">The linearGradient element lets users define linear gradients to fill or stroke graphical elements</text>
<div class="item">
<svg class="item-shape">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="100%" y2="0%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ee0979" stop-opacity="1"/>
<stop offset="100%" stop-color="#ff6a00" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="100" y="50" width="300" height="300" fill="url(#myLinearGradient1)" />
</svg>
<text class="desc">linearGradient</text>
</div>
</scroller>
</div>
</template>
<style>
.page{
flex: 1;
padding-top: 20px;
background-color: #fff;
}
.main{
padding-top: 88px;
}
.desc{
margin: 20px;
font-size: 28px;
text-align: left;
color: #444;
}
.item{
align-items: center;
margin: 20px;
padding: 10px;
border-bottom: 2px solid #ddd;
}
.item-shape{
width: 600px;
height: 480px;
}
</style>
<script>
import navbar from '../include/navbar.vue';
module.exports = {
components: {
navbar
},
};
</script>