SVG_9_线性颜色渐变_竖排文字

知识点：

linearGradient线性颜色渐变
text竖排文字-writing-mode
animateMotion动画

先来说说text竖排文字，text默认是横排的，那怎样要竖排呢，其实很简单，就是一个属性的设置。

垂直字体设置writing-mode属性设置为tb即可。

writing-mode="tb"

在text标签中，添加 writing-mode="tb"这个属性就可以了，当然模式中还有其他的参数，见下图，都是什么效果，快去试试吧。

好了，言归正传，进入今天主题--线性颜色渐变，为了增加趣味性，我又豪横的加了点动画。

先看效果图：

好尴尬呀，这里的颜色渐变竟然渲染不上，好吧，还是拿出录屏神器

线性渐变-竖排文字-来回移动的动画

我们今天认识下主角儿：<linearGradient>

linearGradient元素用来定义线性渐变，用于图形元素的填充或描边。

本实例主要用到了<defs>标签，用来定义linearGradient中的参数。同时定义id，用来在需要的引入的图形中，通过fill=“url(id)”的方式进行引用。

另外说一句动画，本次使用的是animateMotion，在指定的路径上移动，通过repeatCount="indefinite"形成镜像，达到来回往复的移动效果。

上干货，上代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">    <g stroke="black" stroke-width="3" fill="url(#SVG_Gradient)" font-size="70">        <text font-size="70" x="200" y="200" text-anchor="middle">            孔方兄        </text>        <text font-size="70" x="200" y="270" text-anchor="middle">            Xi说SVG        </text>    </g>    <g stroke="red" stroke-width="3" fill="url(#SVG_Gradient)" font-size="70">        <rect width="100" height="100" x="10" y="10"/>        <rect width="100" height="100" x="290" y="10"/>        <rect width="100" height="100" x="10" y="290"/>        <rect width="100" height="100" x="290" y="290"/>    </g>    <g stroke="#1cc4ee" stroke-width="3" fill="url(#cir_top_Gradient)" font-size="70">        <circle r="50" cx="200" cy="60">            <animateMotion path="M-40 0H40Z" dur="3s" repeatCount="indefinite"/>        </circle>    </g>    <g stroke="#290909" stroke-width="3" fill="url(#cir_bottom_Gradient)" font-size="70">        <circle r="50" cx="200" cy="340">            <animateMotion path="M-40 0H40Z" dur="4s" repeatCount="indefinite"/>        </circle>    </g>
    <defs>        <linearGradient id="cir_top_Gradient">            <!-- <stop offset="0%" stop-color="black"/> -->            <stop offset="25%" stop-color="white"/>            <stop offset="50%" stop-color="green"/>            <stop offset="100%" stop-color="red"/>        </linearGradient>    </defs>    <defs>        <linearGradient id="cir_bottom_Gradient">            <!-- <stop offset="0%" stop-color="black"/> -->            <stop offset="25%" stop-color="red"/>            <stop offset="50%" stop-color="green"/>            <stop offset="100%" stop-color="white"/>        </linearGradient>    </defs>    <defs>        <linearGradient id="SVG_Gradient">            <stop offset="25%"  stop-color="blue"/>            <stop offset="50%"  stop-color="red"/>            <stop offset="80%" stop-color="gold"/>        </linearGradient>    </defs></svg>

SVG_9_线性颜色渐变_竖排文字_动画相关推荐

微信图片怎么添加竖排文字_轻松设置微信竖排昵称
原标题:轻松设置微信竖排昵称今天给大家带来两个微信小技巧,一个是如何快速设置竖排昵称,一个是微信模糊消息的代码! ▍霸屏模糊文字代码先看效果吧! 刚发到群里,就引起了一阵骚动,这种将文字模糊以后的 ...
微信图片怎么添加竖排文字_怎样在手机上给微信图片上添加文字？
"极客谈科技",全新视角.全新思路,伴您遨游神奇的科技世界. 微信朋友圈已经成为我们展示生活状态的主要方式之一,可以支持文字.图片.小视频等多种组合.很多好友分享出来的照片竟然还有 ...
微信图片怎么添加竖排文字_如何给微信里的图片添加上文字和日期？
谢邀. 其实给微信里的图片添加文字和日期,有很多种方法,今天就给大家以华为手机为例,介绍一种最简单快捷的方法. 打开[相机],点击[更多],选择[水印],就可以在左下角添加水印了.自带的水印内容包括拍 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
Android 自带描边颜色渐变炫酷进度条
/** 外描边的宽度 */ private float BORDER_STROCK; /** 进度条进度矩形与控件边界的距离,≥BORDER_STROCK */ private float PROGR ...
颜色渐变从上往下渐变_好的Golly，网络上的渐变
颜色渐变从上往下渐变梯度正在悄悄卷土重来. 有一阵子他们属于迈阿密虎钳和龙舌兰日出世界,然后他们增加了1980年代的杂志的深度,然后出现了Geocities –好吧,让我们不谈过去. 如今,网络 ...
ios弧形进度条_【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
文字竖排居中_微信朋友圈文字如何设置居中居右？
每次发朋友圈,选好图片,输入构思已久的文字内容,点击发布! 静静的等待着...会有谁给我点赞呢?会有谁给我评论呢?然后,就没有然后了...很多刷存在感的小伙伴和做微商的小伙伴是不是都有这样的困惑?构思 ...

SVG_9_线性颜色渐变_竖排文字_动画

SVG_9_线性颜色渐变_竖排文字_动画相关推荐

最新文章

热门文章