SVG 渐变（linearGradient、radialGradient）

最新推荐文章于 2024-01-23 17:17:40 发布
最新推荐文章于 2024-01-23 17:17:40 发布
阅读量1.3w 收藏 10
点赞数 3
分类专栏： SVG 文章标签： svg gradient
转载请注明出处——https://blog.csdn.net/chy555chy
本文链接：https://blog.csdn.net/chy555chy/article/details/53415770
版权

渐变简介

渐变是一种从一种颜色到另一种颜色的平滑过渡。
在SVG中，有两种主要的渐变类型：

  • 线性渐变（linearGradient）
  • 放射性渐变（radialGradient）

SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素。

linearGradient（线性渐变）

  • （x1，y1）到（x2，y2）的连线是线性渐变的径向。
  • 渐变径向起点之前的为最小offset的stop-color的纯色。
  • 渐变径向终点之后的为最大offset的stop-color的纯色。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <linearGradient id="linearGradient_x1_1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="linearGradient_x1_2" x1="50%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="linearGradient_x1_3" x1="100%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>

    <linearGradient id="linearGradient_x2_1" x1="0%" y1="0%" x2="0%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="linearGradient_x2_2" x1="0%" y1="0%" x2="50%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="linearGradient_x2_3" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>

    <ellipse cx="120" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_1)" />
    <ellipse cx="350" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_2)" />
    <ellipse cx="580" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_3)" />
    <ellipse cx="120" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_1)" />
    <ellipse cx="350" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_2)" />
    <ellipse cx="580" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_3)" />

    <path d="M70,20 v250 M120,20 v250 M170,20 v250 M300,20 v250 M350,20 v250 M400,20 v250 M530,20 v250 M580,20 v250 M630,20 v250" stroke="blue" stroke-width="2" />
</svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200" >
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
    </linearGradient>
    <text x="10" y="30" font-size="30px" fill="url(#linearGradient)">跟我一起学SVG</text>
</svg>

这里写图片描述

radialGradient（放射性渐变）

  • <stop> 标签定义了梯度停点（渐变点）
    • offset 表示梯度值，0%是最上层（最内侧），100%是最下层（最外层）
  • （cx，cy）为最下层（最外层）
  • （fx，fy）为最上层（最内层）渐变中心点
  • r 为最内层和最外层（最上层和最下层）渐变半径
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <radialGradient id="radialGradient_r1" cx="50%" cy="50%" r="0%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_r2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_r3" cx="50%" cy="50%" r="100%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_c1" cx="0%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_c2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_c3" cx="100%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_f1" cx="50%" cy="50%" r="50%" fx="0%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_f2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <radialGradient id="radialGradient_f3" cx="50%" cy="50%" r="50%" fx="100%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>

    <ellipse cx="120" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r1)" />
    <ellipse cx="350" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r2)" />
    <ellipse cx="580" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r3)" />
    <ellipse cx="120" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c1)" />
    <ellipse cx="350" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c2)" />
    <ellipse cx="580" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c3)" />
    <ellipse cx="120" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f1)" />
    <ellipse cx="350" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f2)" />
    <ellipse cx="580" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f3)" />

    <path d="M70,20 v380 M120,20 v380 M170,20 v380 M300,20 v380 M350,20 v380 M400,20 v380 M530,20 v380 M580,20 v380 M630,20 v380" stroke="red" stroke-width="2" />
</svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200" >
    <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>
    <text x="10" y="30" font-size="30px" fill="url(#radialGradient)">跟我一起学SVG</text>
</svg>

这里写图片描述

福州司马懿
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义View之Paint - RadialGradient
行云间
11-06 852
RadialGradient即放射性渐变，由中心点向四周逐渐渐变，其颜色渐变是由中心点向四周以线性变化。
SVG 渐变 - 线性
最新发布
lly202406的博客
06-05 427
线性渐变是SVG中一个强大的特性，它允许设计师和开发者创建丰富和动态的视觉效果。通过掌握线性渐变的语法和技巧，你可以轻松地将其应用于你的网页和图形设计中，使它们更加吸引人。
Svg Linear Gradient
husiyuan6的博客
08-02 657
使用 svg 里的 gradient 可以轻松为图形设置渐变色、逐渐变化的透明度。 简单来说，在是先定义一个linear gradient，设置几个stop，就是起止点，定义他们相应的颜色、透明度等其他属性。其他图形应用这个lineargradient 就可以了。 看个例子： 如果x1和x2相同，y1和y2不同，就是垂直改变。 如果x1和x2
16.SVG线性渐变（Linear Gradient）
liuhao9999的博客
03-28 4721
SVG 渐变 和CSS3一样，SVG也支持渐变，渐变就是从一个颜色到另外一个颜色的平滑过渡，SVG支持单个元素使用多个渐变。渐变方式有两种：线性和径向。 SVG 线性渐变 - linearGradient <linearGradient> 元素用来定义一个线性渐变。 <linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述，<defs> 标签用来包含特殊元素（如滤镜、渐变等）。 线性渐变可以被定义为水平、垂直或角度渐变
svg渐变 线性渐变和径向渐变
guoqkmiss的博客
09-27 589
一、linearGradient 线性渐变 SVG 渐变必须在 标签中进行定义。 线性渐变可被定义为水平、垂直或角形的渐变： 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变 属性 <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称 fill:url(#orange_red) 属性把 ellipse 元
Android 颜色渲染(六) RadialGradient 环形渲染
844604778
08-31 711
Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colors, float[] positions,Shader.TileMode tile) float x: 圆心X坐标 float y: 圆心Y坐标 float radius: 半径 i...
svg渐变
m0_72738258的博客
07-18 293
svg渐变
SVG 线性渐变
ivenqin的博客
01-18 567
本节我们学习 SVG 中的渐变。首先我们需要弄清楚什么是渐变，SVG 中的渐变可以理解为一种颜色到另外一种颜色的过渡，而这种颜色的过渡又分为两种形式，即线性渐变和径向渐变。本节我们会先学习线性渐变。 什么是线性渐变 我们先来看线性渐变，线性渐变就是直线的渐变，例如将不同的颜色从左向右进行渐变。我们可以使用 <linearGradient> 元素来定义线性渐变，这个元素必须嵌套在 <defs> 元素内部，<defs> 元素可以对渐变这类元素进行定义。 示例： 我们先来看一个
Svg的阴影、渐变和动画
m0_72527416的博客
12-20 691
建议把所有需要再次使用的引用元素定义在 元素里面。在 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 元素呈现这些元素。每一像素的颜色值（一个表示为 [红，绿，蓝，透明度] 的矢量）都经过矩阵乘法计算出新的颜色。 将输入图像作为一个整体，通过属性 dx 和属性 dy 的值指定一个偏移量。 元素用来定义径向渐变，以对图形元素进行填充或描边。元素用来定义线性渐变，用于图形元素的填充或描边。
Svg颜色渐变和阴影
LiHang1234567777的博客
07-18 2447
feBlend与图像相结合的滤镜用于彩色滤光片转换模糊滤镜feMerge多滤镜叠加滤镜可用来定义SVG的线性渐变，主要是定义方向和颜色。可用来定义SVG的径向渐变，主要是定义方向和颜色。当y1和y2相等，而x1和x2不同时，可创建水平渐变当x1和x2相等，而y1和y2不同时，可创建垂直渐变当x1和x2不同，且y1和y2不同时，可创建角形渐变...
SVG入门-渐变
natsu-cc的博客
03-22 1163
前言 SVG并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。 有两种类型的渐变：线性渐变和径向渐变。你必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。 线性渐变 线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient> 节点。 <svg width="120" heig
HTML5 SVG渐变填充文本特效.zip
10-05
在这个"HTML5 SVG渐变填充文本特效.zip"中，我们关注的是如何利用SVG来实现文本的渐变填充效果。渐变在设计中是一个常用元素，它可以为文本添加深度和动态感。在SVG中，我们可以创建线性渐变或径向渐变，这两种渐变...
SVG环形渐变
08-10
首先，SVG环形渐变的基础是`<linearGradient>`或`<radialGradient>`元素。线性渐变通常用于沿直线方向的色彩过渡，而径向渐变则适用于圆形或椭圆的色彩扩散。对于环形渐变，我们通常选择使用`<radialGradient>`，...
SVG Gradients之Linear
weixin_33843409的博客
05-17 119
SVG Gradients（渐变） 渐变是指从一种颜色向另外一种颜色的平滑转换。几种颜色转化能同时作用于同一个元素中。 SVG中主要有两种渐变: Linear （线性渐变） Radial （径向渐变） SVG <linearGradient> <linearGradient>元素必须嵌套在<defs>中 <l...
radial-gradient
阿波罗吹雪的博客
04-03 978
radial-gradient
svg的渐变元素用法
zhengsr12345的博客
01-23 1876
介绍svg的渐变元素
CSS3学习之radial-gradient（径向渐变）
weixin_33720956的博客
04-22 2603
转自：http://www.cnblogs.com/rainman/p/5133685.html 1、语法 径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下： background: radial-gradient(center, shape, size, start-color, ..., last-col...
radial-gradient（径向渐变）
softlipaaa的博客
07-08 4469
radial-gradient（径向渐变）介绍总结语法 介绍 1、radial-gradient( )径向渐变（放射性效果） 2、默认情况下，径向渐变的形状是根据元素的形状来计算的 正方形- ->圆形 长方形- ->椭圆形 3、我们也可以手动指定径向渐变的大小 可选值： circle 圆形 ellipse 椭圆 示例： background-image:radial-gradient(100px 100px , red , yellow); background-ima
svg 使用lineargradient
03-21
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。它可以用于创建各种图形，包括线性渐变（Linear Gradient）。 线性渐变是一种在SVG中创建平滑过渡效果的方法，它可以在两个或多个颜色之间创建一个渐变。使用线性渐变，你可以定义一个起点和一个终点，然后在这两个点之间创建一个颜色过渡。 要使用线性渐变，你需要使用`<linearGradient>`元素来定义渐变的属性。以下是一个示例： ```html <svg width="200" height="200"> <defs> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <rect width="200" height="200" fill="url(#myGradient)" /> </svg> ``` 在上面的示例中，我们首先使用`<defs>`元素定义了一个线性渐变，它的id属性设置为"myGradient"。然后，在`<linearGradient>`元素内部，我们使用`<stop>`元素定义了两个颜色停止点。每个`<stop>`元素都有一个offset属性，它表示颜色停止点在渐变中的位置。我们还可以使用style属性来定义每个颜色停止点的颜色和透明度。 最后，我们使用`<rect>`元素创建了一个矩形，并将fill属性设置为"url(#myGradient)"，这样矩形就会填充线性渐变的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值