标签svg方法匀速移动

最新推荐文章于 2025-05-17 09:21:20 发布
最新推荐文章于 2025-05-17 09:21:20 发布
阅读量277 收藏
点赞数
本文介绍了如何使用SVG创建简单的动画效果，并通过JavaScript动态添加SVG元素。通过具体实例展示了SVG图形的基本属性设置方法及定时器在动画制作中的应用。
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    svg {
      background:#eff3ef;
    }
/*    #r1 {*/
/*      background: #faa;  */
/*    }*/
  </style>
 </head>
 <body>
  <h1>使用SVG绘制矩形</h1>  


  <svg width="500" height="400">
    <rect id="r1" x="0" y="0" width="100" height="80" fill="rgba(255,0,0,0.2)" stroke="rgb(255,0,0)" stroke-width="6"></rect>


    <rect id="r2" x="400" y="0" width="100" height="80" style="fill:rgba(0,255,0,0.2); stroke:rgb(0,255,0); stroke-width:6;"></rect>




    <rect id="r3" x="0" y="320" width="100" height="80"></rect>
  </svg>


  <script>
  //使用定时器让图形动起来
  //var x = r3.x;  //注意！SVG元素的属性不是传统的HTML DOM属性   SVGAnimatedLength{  }
  var x = r3.getAttribute('x');  //读取属性
  //console.log(typeof x);   string
  //console.log(x);          0
  setInterval(function(){
    x = parseInt(x) + 5;
    r3.setAttribute('x', x);  //修改属性
  }, 42);
  </script>
 </body>
</html>






//动态添加方法
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    svg {
      background:#eff3ef;
    }
  </style>
 </head>
 <body>
  <h1>使用JS动态添加矩形</h1>  


  <svg id="svg8" width="500" height="400">
    <rect x="0" y="320" width="100" height="80"></rect>
  </svg>


  <script>
  //使用原生DOM操作添加新元素
  //var r1 = document.createElement('rect'); 此方法创建的元素，默认命名空间 http://www.w3.org/2000/html


  var r1 = document.createElementNS('http://www.w3.org/2000/svg',  'rect');
  r1.setAttribute('x', 0);
  r1.setAttribute('y', 0);
  r1.setAttribute('width', 100);
  r1.setAttribute('height', 80);
  svg8.appendChild( r1 );
  </script>
 </body>
</html>

北海军
关注
SVG 基础教程
棒棒编程修炼场
11-09 1493
目录一、SVG 基础二、绘制图形2.1 绘制矩形2.2 绘制圆形2.3 绘制椭圆2.4 绘制多边形2.5 绘制直线2.6 绘制曲线2.7 绘制路径2.8 绘制文本三、SVG 中的滤镜3.1 SVG 滤镜类型3.2 SVG 实现马赛克效果四、SVG 实现动画五、SVG 中的渐变5.1 线性渐变5.2 径向渐变 最近笔者在抓取数据的时候，遇到了 SVG 反爬，故找了一份 SVG 学习笔记，本文用于记录 SVG 学习过程中的知识点。 一、SVG 基础 SVG 指可伸缩矢量图形，是定义用于网络的基于矢量的图形，并且
流动的SVG线条
weixin_34194379的博客
04-02 3136
话不多说，咱先上效果图： 是不是很酷炫，这个效果是用SVG+CSS实现的，现在我们就来一起解构一下这个动画的实现。 预备知识 需要掌握的几个SVG的几个标签用法 <path> 指令 参数 说明 M x y 将画笔移动到点(x,y) L x y 画笔从当前的点绘制线段到点(x,y) H x 画笔从当前的点绘制水平线段到点(x,y0) V y 画笔从当前的...
svg移动+缩放+拖动添加+事件
04-17
svg鼠标滚轮缩放，鼠标拖动svg。拖动div添加svg元素，并添加元素的左右键单击事件
SVG实现rect的移动效果
大尾猴的博客
10-18 798
关键JS： let odiv = e.target; odiv.x.baseVal.value += e.movementX; odiv.y.baseVal.value += e.movementY; e就是鼠标点下（mousedown）动作的入参，通过e.movementX获得鼠标移动的水平X轴距离，通过e.movementY获得鼠标移动的垂直Y轴距离，通过e.target获得鼠标点下时操作的对象（此处即为<rect>），通过修改odiv.x.baseVal.value的值实现水平..
SVG 矩形rect 学习
liuyan1106_的博客
04-12 4696
1 基础写法 以下两种写法都可以定义图形的样式，矩形默认的填充颜色是黑色。 <svg> <rect width="300" height="100" /> </svg> <svg> <rect style="width:300px;height:100px;" /> </svg> 效果截图： 2 填充背景色 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。 <svg> <re
SVG图形中图形元素移动示例
chilong的专栏
06-23 2719
  这个是从网上找到的，整篇svg文件代码如下：  onload=Init(evt) onmousedown=Grab(evt) onmousemove=Drag(evt) onmouseup=Drop(evt)> Drag And Drop A nice little demo of drag-and-drop functionality
一根飞线的故事（SVG 篇）
前端大全
06-10 1449
（给前端大全加星标，提升前端技能）作者：胖子https://zhuanlan.zhihu.com/p/67031777没有飞线的地图就像一个发际线上移的中年人一样平淡无奇...
svg logo动画
01-31
- 在HTML5文档中，可以直接内联插入SVG元素，或者通过`<object>`或`<img>`标签引用外部SVG文件。 - CSS3选择器可以轻松地对SVG元素应用样式，包括动画效果。 5. 示例代码： ```html <svg width="100" height=...
<svg class="right-svg" viewBox="0 0 2800 70"> <polyline class="right-line" points="100,50 150,50 162.5,40 175,60 187.5,40 200,70 212.5,10 225,60 237.5,45 250,50 300,50" ></polyline> </svg>这个标签保持不动,内部线条从右到左匀速运动
06-08
接下来，您可以创建一个关键帧动画，使线条从右到左匀速移动。下面是一个示例CSS代码： ``` .right-svg { position: relative; } .right-line { position: absolute; animation: move 10s linear infinite; } ...
<svg class="right-svg" viewBox="0 0 2800 70"> <polyline class="right-line" points="100,50 150,50 162.5,40 175,60 187.5,40 200,70 212.5,10 225,60 237.5,45 250,50 300,50" ></polyline> </svg>这个标签,内部线条从右到左匀速运动
06-08
要实现内部线条从右到左...动画的持续时间为10秒，动画的缓动函数为`linear`，使得线条的移动速度是匀速的。最后一个参数`infinite`表示动画将无限循环播放。 这样，您就可以实现内部线条从右到左匀速运动的效果了。
SVG圆点直线移动
weixin_30470857的博客
10-18 752
<circle cx="0" cy="0" r="3" stroke="#5dd3ff" stroke-width="1" fill="#5dd3ff"> <animateMotion :path="M0,0 50,50" begin="-10s" dur="30s" repeatCount="indefinite"/> </circle>...
SVG学习之stroke-dasharray 和 stroke-dashoffset 详解
热门推荐
huzhenv5的博客
12-28 1万+
第一：概念解释 stroke意思是：画短线于，在…上划线 stroke-dasharray:用于创建虚线，之所以后面跟的是array的，是因为值其实是数组。请看下面解释 stroke-dasharray = '10' stroke-dasharray = '10, 5' stroke-dasharray = '20, 10, 5' stroke-dasharray为一个参数时： 其...
详解：哪种SVG提示符的动画最有效
e2_cool的博客
04-23 485
因而，SVG 的创作应当以相对平和的提示符启动，随后给予较高强度的动画反馈设计，并在中后期逐步降低交互的复杂性以确保完读率。例如，用户点击按钮后，后续动画应在 400 毫秒内执行并展示，让用户知晓操作已被接收。因而，SVG 的创作应当尽可能遵循模版原先的执行方式，避免出现重复上传素材（导致画面不变化）的情形，影响用户的反馈体验。在设计提示符动画时，需要结合具体的应用场景、用户需求和产品风格来选择合适的动画效果，同时要注意动画的时长、速度和频率等参数，确保既能有效地传达信息，又不会给用户带来困扰或不良体验。
SVG实现边框动画效果
木子PZ的博客
07-24 6112
用svg来实现当鼠标经过某个元素时，它的边框线条的一个动画效果（原文实例演示连接：http://tympanus.net/Tutorials/BorderAnimationSVG/） 要用到的svg的一个属性是：stroke-dasharray，首先来看一张图 中间黄色的矩形是svg(width: 300px; height: 460px;)，然后设置四个方向的line（图中红黑相间的线条）
html svg 移动缩放,SVG缩放，移动，倾斜和旋转变换
weixin_42463165的博客
06-27 4678
SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。#FormatImgID_0#SVG系列教程transform属性值tranform属性用来对一个元素声明一个或多个变...
SVG图形变换的艺术：缩放与平移的力量
最新发布
weixin_35516624的博客
05-17 474
本文深入探讨了SVG图形变换中的缩放与平移技巧。通过利用缩放因子的不同值，我们可以实现图形的放大与缩小，甚至是镜像反射。同时，平移操作能够改变图形坐标系的原点位置而不影响图形的大小和形状。本文还介绍了如何通过结合使用这些变换以及如何适配未来CSS变换的最新标准。
使用SVG实现3D图形显示，移动和旋转
firefight的专栏
09-14 1万+
 本例可以作为上文的一个补充，在这个例子中主要有 1，在2D中建立3D坐标       原点 屏幕的中心点X轴 向右Y轴 向上Z轴 与XY成135度角 2，建立3D点到2D的映射关系（多对一，即可能有多个3D点映射到一个2D点上） x=x-z*sin(theta);              y=y-z*cos(theta);        
Study JavaScript《JS操作SVG的一些知识》
傻大专栏
11-25 9689
前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。 虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但
SVG缩放平移优化
weixin_42476367的博客
11-01 804
由于转换的svg文件太大了(5~10M)，浏览器渲染的过程中异常卡顿。平移、缩放很难进行。这里记录svg优化的奇思妙想
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值