svg 绘制多边形渐变边框并填充渐变背景

以六边形为例

绘制一个60*69像素的六边形

根据坐标 points="30,1 60,17 60,52 30,69 1,52 1,17"

设置边框大小 stroke-width="1"

设置边框颜色 stroke="#03ffea"

设置填充颜色 fill="#0f8bf1"

<svg width="60" height="69"><polygon points="30,1  60,17 60,52 30,69 1,52 1,17" stroke="#03ffea" fill="#0f8bf1" stroke-width="1" />
</svg>

以上绘制出一个有填充颜色且有边框的多边形

接下来设置边框的渐变

根据文档得知 linearGradient元素用来定义线性渐变，用于图形元素的填充或描边

在svg标签内增加linearGradient标签用于设置渐变

ID一定要填写在多边形标签内需要使用

代码如下

<svg width="64" height="73"><defs><linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="rgba(16,32,73,0)"/><stop offset="50%" stop-color="rgba(8,68,158,0)"/><stop offset="80%" stop-color="rgba(6,81,191,0.18)"/><stop offset="100%"   stop-color="rgba(0,108,255,0.35)"/></linearGradient><linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%"   stop-color="#03ffea"/><stop offset="100%" stop-color="#0f8bf1"/></linearGradient></defs><polygon fill="url(#linear)" points="30,1  60,17 60,52 30,69 1,52 1,17" stroke="url(#linear1)" stroke-width="2" />
</svg>

以上多边形渐变边框且渐变填充已绘制完成

按需要增加边框动画

<style>polygon{animation: strokeDefaultPoly 3s linear infinite alternate;}@keyframes strokeDefaultPoly {0% {stroke-dasharray: 0 50;}100% {stroke-dasharray: 500;}}
</style>

css 中可以通过设置stroke-dasharray属性值调整动画起始

以上。

希望这篇文章能对大家有所帮助

svg 绘制多边形渐变边框并填充渐变背景相关推荐

CSS3 渐变边框，按钮样式、设计图标、电子优惠券详解！
1.定义渐变边框实例设计: 本例使用 backgroun-imag 属性提供渐变边框,定义渐变边框,效果如下: 代码: 2.定义渐变填充色本例通过 conten 属性为 div class=wy ...
iOS绘制物理按钮 - 透明圆角渐变边框
需求是需要制作一个投票组件,支持边框是透明渐变,填充为渐变色背景的不规则按钮,并支持有点击之后的变化动画. 搜索了一圈内部技术论坛上文章,并没有类似的透明渐变边框的参考文章,遂起草对这一内容的总结. ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
SVG绘制渐变颜色文字
H5提供了很多有意思的新特性,工作中用的比较少,但是这仍然不能阻碍我们对它的兴趣,先给大家上个图,如果要用CSS来写这个效果,如何才能实现呢? 怎么样?这个文字效果不好实现吧,以上这个效果其实是用H5 ...
说说在 Canvas 中如何填充渐变颜色
渐变颜色填充方式有两种:线性或径向. 线性渐变填充会创建一个水平 . 垂直或者对角线的填充图案. 径向渐变填充会自中心点创建一个放射状填充图案. 1 线性渐变 1.1 线性水平渐变 (1)基本形状 S ...
渐变边框小型研究（如果做出一个颜色渐变、宽度渐变的边框)
前几天跟人讨论到一道题目.怎么实现如图的效果可以看到.这里有点渐变边框. 不过对于这个题目我们两人产生了一点歧义... 我以为是渐变边框加上逐渐缩小... 然后群友认为的是渐变边框后来群友给出了渐 ...
css div 边缘渐变,围绕div的CSS3渐变边框
3 个答案: 答案 0 :(得分:1) 我建议使用border-image属性 .top-to-bottom { border-bottom: 10px solid trasparent; borde ...
java如何设置圆角边框_巧妙实现带圆角的渐变边框
如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意. border-image border-image 是 CSS 规范 CSS Backgrounds ...
基于SVG的绘制多边形jQuery插件
需求:用户在图片上点击选择绘制一个多边形区域,双击停止绘制,在结束绘制后给后台返回这组多边形顶点的位置参考了百度地图提供的绘制多边形方法,但百度地图只提供了API可以调用,所以只能自己写方法了 // ...

svg 绘制多边形渐变边框并填充渐变背景

svg 绘制多边形渐变边框并填充渐变背景相关推荐

最新文章

热门文章