svgdom实现线性渐变

最新推荐文章于 2023-09-03 16:43:20 发布
最新推荐文章于 2023-09-03 16:43:20 发布
阅读量669 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baohanqing/article/details/17688619
版权
svgdom实现线性渐变
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>svg线性渐变</title>
    <style>
        #linear{
            border: 1px solid red;
            width: 205px;
            height: 210px;
        }
    </style>
    <script>
        function createLinerGradient(){
        var root=document.getElementByIdx_x("linear");
        var SVG="http://www.w3.org/2000/svg";

        //创建我们的svg元素
        var svg=document_createElement_xNS(SVG,"svg");
        svg.setAttribute("width","205");
        svg.setAttribute("height","210");

        //创建我们的defs元素
        var defs=document_createElement_xNS(SVG,"defs");
        //创建linearGradient元素
        var linearGradient=document_createElement_xNS(SVG,"linearGradient");
        linearGradient.setAttribute("id","colorGradient");
        //定义颜色的切换点
        var stop1_1=document_createElement_xNS(SVG,"stop");
        var stop1_2=document_createElement_xNS(SVG,"stop");
        stop1_1.setAttribute("offset","0%");
        stop1_1.setAttribute("stop-color","#0000ff");
        stop1_2.setAttribute("offset","100%");
        stop1_2.setAttribute("stop-color","#00ffff");

        linearGradient.a(stop1_1);
        linearGradient.a(stop1_2);
        defs.a(linearGradient);

        var alphaGradient=document_createElement_xNS(SVG,"linearGradient");
        alphaGradient.setAttribute("id","alphaGradient");
        alphaGradient.setAttribute("x1","0");
        alphaGradient.setAttribute("x2","0");
        alphaGradient.setAttribute("y1","0");
        alphaGradient.setAttribute("y2","100%");
        //定义颜色的切换点
        var stop2_1=document_createElement_xNS(SVG,"stop");
        var stop2_2=document_createElement_xNS(SVG,"stop");
        stop2_1.setAttribute("offset","0%");
        stop2_1.setAttribute("stop-color","#0000ff");
        stop2_1.setAttribute("stop-opacity","1");
        stop2_2.setAttribute("offset","100%");
        stop2_2.setAttribute("stop-color","#00ffff");
        stop2_2.setAttribute("stop-opacity","0");

        alphaGradient.a(stop2_1);
        alphaGradient.a(stop2_2);
        defs.a(alphaGradient);

        var rect1=document_createElement_xNS(SVG,"rect");
        rect1.setAttribute("x",0);
        rect1.setAttribute("y",0);
        rect1.setAttribute("ry",20);
        rect1.setAttribute("width",100);
        rect1.setAttribute("height",200);
        rect1.setAttribute("fill","url(#colorGradient)");

        var rect2=document_createElement_xNS(SVG,"rect");
        rect2.setAttribute("x",100);
        rect2.setAttribute("y",0);
        rect2.setAttribute("ry",20);
        rect2.setAttribute("width",100);
        rect2.setAttribute("height",200);
        rect2.setAttribute("fill","url(#alphaGradient)");

        svg.a(defs);

        svg.a(rect1);
        svg.a(rect2);

        root.a(svg);
        }
    </script>
</head>
<body οnlοad="createLinerGradient()">
    <h3>svgdom线性渐变</h3>
    <div id="linear"></div>
</body>
</html>
战略观察者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
09-28
由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM,本文将详细介绍下SVG中的DOM操作，感兴趣的朋友可不要错过哦
svg线性渐变
weixin_45736311的博客
01-31 224
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> // 1 圆形 <cir.
把 CSS 径向渐变用得出神入化，只用一个 DOM 元素就能画出国宝熊猫--------------------微软 连线
HEMM000的专栏
06-10 350
 动画 特效 css3 css codepen35效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/odKrpy可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https://scrimba.com/p/pEgDAM/cV7J6...
svg path 设置fill的渐变色
u012632105的博客
09-03 1672
表示从 70% 的位置开始变成透明。属性规定了渐变颜色的位置，例如。标签定义了渐变的颜色和位置。定义了一个线性渐变，
svg 绘制多边形渐变边框并填充渐变背景
weixin_43860703的博客
02-03 2409
以六边形为例 绘制一个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="#03...
svg渐变多边形背景动效.zip
08-08
6. **渐变（Gradient）**：在CSS中，可以使用线性渐变（linear-gradient）或径向渐变（radial-gradient）为元素创建平滑的颜色过渡。在这个项目中，渐变可能应用于多边形的填充或边框，以产生视觉上的深度和动感。 ...
SVG|JS实现饼图
06-06
这些可以通过监听DOM事件和改变CSS属性来实现。如果你对这个话题感兴趣，可以进一步研究如何添加这些交互功能，或者学习其他成熟的图表库，如D3.js，它提供了丰富的API和工具来创建各种复杂的可视化效果。
HTML5 SVG渐变填充文本特效.zip
最新发布
10-05
在SVG中，我们可以创建线性渐变或径向渐变，这两种渐变方式都可以应用到文本元素上，使得文字颜色平滑过渡，呈现出丰富的视觉效果。 线性渐变在SVG中通过`<linearGradient>`元素定义，它定义了颜色从一个方向平滑...
css3-svg的图和操作
07-03
1. **颜色和渐变**：你可以使用`fill`和`stroke`属性来改变SVG元素的颜色，或者创建线性渐变和径向渐变，为图形添加丰富的视觉层次。 2. **阴影**：`box-shadow`和`text-shadow`属性可以为SVG元素添加阴影效果，...
渐变圆形数字
04-20
2. **CSS3 渐变**: CSS3提供了线性渐变和径向渐变两种方式，可以用于圆形数字的背景。线性渐变沿着设定的方向平滑过渡，而径向渐变则从一个圆心向外扩散。在CSS中，可以使用`linear-gradient`或`radial-gradient`...
渐变的几种形式
泪的结晶的博客
07-20 5663
线性渐变的实例： 1.从上到下的线性渐变： .box { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient...
SVG颜色、渐变和填充
weixin_30828379的博客
10-17 388
颜色 RGB和HSL都是CSS3支持的颜色表示方法，一般普遍使用是RGB。PS：HSL浏览器兼容。 RGB RGB即是代表红、绿、蓝三个通道的颜色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。 表示方式 取值范围 优点 缺点 rgb(r, g, b) [0, 255] 每个分量 显示器容...
SVG特效之彩虹渐变
Bohn的博客
09-01 1361
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&a
SVG 渐变学习之——SVG 线性渐变
sungang1120的专栏
05-22 280
SVG 渐变必须在 &lt;defs&gt; 标签中进行定义。 SVG 渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。 在 SVG 中，有两种主要的渐变类型： 线性渐变 放射性渐变   线性渐变 &lt;linearGradient&gt; 可用来定义 SVG 的线性渐变。 &lt;linearGrad...
svg 地图 及path的渲染
boke的博客
08-22 9203
SVG绘制地图图 并在地图实现一些特效 难点： 1.在web上渲染地图，省市坐标定位。效果如上图：A省画黄色圈，B省画蓝色圈， 2.path计算描绘、颜色渐变及path的动态效果。效果如上图：路径由黄色渐变成蓝色，路径上有个白色箭头由A省向B省移动。
svg引入
zhuixunhebe1的专栏
03-08 518
通过jquery能手动添加SVG元素吗？ 今天 13:12polo_zs | 分类：JavaScript | 浏览17次 比如 我想通过按钮将下面这条线 添加进svg中 按钮：添加 这个function a(){...}改怎么写? 提问者采纳 今天 13:29 可以，但 svg 不能像普通元素一样进行元素的添加 只要是向 svg 中添加元素的时候，都要使用下面这个 p
字体颜色渐变及背景颜色渐变，需要的DOM直接加对应css样式就行了
会飞的咕咕鱼的博客
05-11 418
1.字体颜色渐变（以线性渐变为例） background-image:-webkit-linear-gradient(left, rgba(255, 41, 25, 1),rgba(255, 33, 68, 1),rgba(255, 179, 23, 1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; 2.背景颜色渐变（以线性渐变为例） background:linear-gradient(270de
[HTML5-SVG]使用svg代替css3实现渐变
我的Github
04-17 3706
ie9不支持渐变，但是支持border-radius和box-shadow，所以在之前的小博客我都是用纯色代替渐变 但是有没有办法让ie9也支持渐变，也许大多数人会想到滤镜，但是滤镜会消耗性能，而且圆角会没有效果，所以不推荐使用。 有没有比css3更合适的方案呢？先看看各浏览器对css3的支持情况 浏览器 Radial CSS Linear CSS Firefo
npm 把svg dom转换base64
09-10
在 npm 上有一个名为 "svg-to-base64" 的包，可以用于将 SVG DOM（文档对象模型）转换为 Base64 编码。 使用 "svg-to-base64" 这个 npm 包非常简单。首先，我们需要使用 npm 命令将该包安装到我们的项目中。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值