首页 > 其他分享 >svg动起来

svg动起来

时间:2023-01-03 18:45:44浏览次数:35  
标签:svg 起来

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
  </g>
</svg>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="150" x="160">
        马
        <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

  

  

 

 

  

  

 

  

 

  

 

标签:svg,起来
From: https://www.cnblogs.com/it-Ren/p/17023106.html

相关文章

  • 站起来,勇敢的面对焦虑和困难
    最近有很多朋友特别焦虑,感觉生活没有希望,被很多事情压的喘不过气来,在这里分享给大家我的一些看法。程序员的焦虑比较普遍,一个是对技术的焦虑,一个是对生活的焦虑。......
  • svg pointer-events="auto"
    svg  pointer-events="auto" <svgwidth="640"height="480"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"poi......
  • JUC源码学习笔记7——FutureTask源码解析,人生亦如是,run起来才有结果
    系列文章目录和关于我一丶我们在哪里会使用到FutureTask基本上工作中和Future接口打交道比较多,比如线程池ThreadPoolExecutor#sumbit方法,返回值就是一个Future(实际上基......
  • svg click
    <svgwidth="640"height="480"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><rectx="150"y="50"width="100"he......
  • 《程序是怎样跑起来的》第一章
    从开头那几个问题中我了解到程序是指示计算机每一步动作的指令,更新了我以往的知识。其次介绍了CPU(中央处理器)能够直接识别和执行的只有机器语言,使用C语言,Java等编写的程序......
  • 《程序是怎样跑起来的第五章》
    计算机主要存储的部件是内存和磁盘,磁盘中存储的程序必须加载到内存才能运行。不读入内存就无法运行。磁盘缓存是指从磁盘中读取的数据存储在内存中的一种方式。加快了磁盘......
  • C++ Primer第三章知识点(想起来啥记啥版)
    命名空间#include<iostream>//using声明,当我们使用名字cin时,从命名空间std中获取它usingstd::cin;intmain(){inti;cin>>i;//正确:cin和st......
  • 《程序是怎么跑起来的第四章》
    内存是一种名为内存IC的电子元件,内存IC中有电源、地址信号、数据信号、控制信号等用于输出的大量引脚,通过指定地址来进行数据读写。   数据类型,就是所占用的内存大小,在......
  • 《程序是怎样跑起来的》第三章
    《程序是怎么跑起来的第三章》:计算机进行小数处理也有可能会出现问题,是在将二进制表示的小数转换为十进制时出现的错误,因为有些十进制的小数无法转换为二进制,也就无法用二......
  • 《程序是怎样跑起来的》第二章
    根据IC的特性,我们知道了计算机的信息数据是用二进制表示的,最小处理单位是位(bit),计算机处理信息最基本的信息计量单位便是8位二进制也称为一个字节。然后就是位移运算表示将......