放射渐变

使用时包含在<svg>标签内

<radialGradient>用来定义放射性渐变。

属性

属性名	默认值	说明
id	none	用来引用该渐变
cx	0	定义渐变圆形的圆心x坐标
cy	0	定义渐变圆形的圆心y坐标
r	0	定义渐变圆形的半径
fx	0	定义颜色聚焦点的x坐标
fy	0	定义颜色聚焦点的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>
      <text class="desc">Radial gradients are gradients in which the colors change circularly rather than linearly</text>
      <div class="item">
        <svg class="item-shape">
          <defs>
            <radialGradient id="myRadialGradient"
               cx="20%" cy="50%" r="45%"
               spreadMethod="pad">
              <stop offset="0%"   stop-color="#4776E6" stop-opacity="1"/>
              <stop offset="100%" stop-color="#8E54E9" stop-opacity="1" />
            </radialGradient>
          </defs>
          <circle  cx="300" cy="200" r="150" fill="url(#myRadialGradient)" />
        </svg>
        <text class="desc">radialGradient</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>

# 放射渐变

# 属性

# spread的有效值

# 代码示例

# 效果展示

放射渐变

属性

spread的有效值

代码示例

效果展示