SVG学习笔记（一）画一个哆啦A梦

最新推荐文章于 2024-06-19 09:49:52 发布
最新推荐文章于 2024-06-19 09:49:52 发布
阅读量843 收藏 6
点赞数 1
原文链接：https://juejin.im/post/5c9375605188252d6019258d
版权

用SVG画一个哆啦A梦

博客原文链接

概述

虽然之前学过SVG，但我在工作中很少用到，正好最近赋闲在家待业中，就重新学了下SVG的东西；

基础

入门教程：

链接：SVG 图像入门教程

总的来说，基本语法还是比较简单的，上面这个教程仅作为入门，不是很全

其他中文资料：

链接：中文手册

链接：MDN SVG资料

MDN上的资料相对全一点

开始

之前看到过别人用html结合css画了一个哆啦A梦，正好用SVG也来实现一个

效果如下：

步骤

1、头部

效果：

代码：

<style>
  @keyframes eyeballAni {
    from {
      transform: translateY(-10px);
    }
    to {
      transform: translateY(5px);
    }
  }
  .eyeball {
    animation: eyeballAni ease 2s infinite;
  }
</style>
<!-- 头 -->
<g id="head">
  <circle cx="150" cy="115" r="105" style="fill: #06B6E1; stroke: #333333; stroke-width: 2px;"/>
  <circle cx="150" cy="130" r="80" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
  <!-- 眼睛 -->
  <g id="eye">
    <ellipse cx="120" cy="70" rx="30" ry="35" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
    <circle class="eyeball" cx="135" cy="85" r="5" />
    <ellipse cx="180" cy="70" rx="30" ry="35" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
    <circle class="eyeball" cx="165" cy="85" r="5" />
  </g>
  <!-- 鼻子 -->
  <circle id="nose" cx="150" cy="110" r="15" style="fill: #C93E01; stroke: #333333; stroke-width: 2px;"/>
  <!-- 嘴巴 -->
  <g id="mouth">
    <line x1="150" y1="125" x2="150" y2="180" style="fill: #333333; stroke: #333333; stroke-width: 2px;" />
    <path d="
      M 100 157,
      A 80 100 0 0 0 200 157
    " style="fill: none; stroke: #333333; stroke-width: 2px;" />
  </g>
  <!-- 胡须 -->
  <g id="moustache">
    <g>
      <line x1="90" y1="110" x2="130" y2="125" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <line x1="90" y1="130" x2="130" y2="130" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <line x1="90" y1="150" x2="130" y2="135" style="fill: none; stroke: #333333; stroke-width: 2px;" />
    </g>
    <g>
      <line x1="170" y1="125" x2="210" y2="110" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <line x1="170" y1="130" x2="210" y2="130" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <line x1="170" y1="135" x2="210" y2="150" style="fill: none; stroke: #333333; stroke-width: 2px;" />
    </g>
  </g>
</g>
复制代码
2、身体

效果：

代码：

<!-- 身体 -->
<g id="body">
  <!-- 身体轮廓 -->
  <path d="
    M 80 215,
    L 30 245,
    L 45 285,
    L 85 265,
    L 85 340,
    L 140 340,
    A 15 50 0 0 1 160 340,
    L 215, 340,
    L 215 265,
    L 255 285,
    L 270 245,
    L 220 215,
    Z
  " style="fill: #06B6E1; stroke: #333333; stroke-width: 2px;" />
  <!-- 手 -->
  <g id="hand">
    <circle cx="40" cy="265" r="25" style="fill: white; stroke: #333333; stroke-width: 2px" />
    <circle cx="260" cy="265" r="25" style="fill: white; stroke: #333333; stroke-width: 2px" />
  </g>
  <!-- 脚 -->
  <g id="foot">
    <path d="
      M 85 340,
      A 2 2 0 0 0 80 360,
      L 140 360,
      A 1.5 2 0 0 0 140 340,
      Z
    " style="fill: white; stroke: #333333; stroke-width: 2px;" />
    <path d="
      M 215 340,
      A 2 2 0 0 1 220 360,
      L 160 360,
      A 1.5 2 0 0 1 160 340,
      Z
    " style="fill: white; stroke: #333333; stroke-width: 2px;" />
  </g>
  <!-- 肚子 -->
  <g id="tummy">
    <circle cx="150" cy="255" r="58" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
    <path d="
      M 110 250,
      A 40 50 0 0 0 190 250,
      Z
    " style="fill: white; stroke: #333333; stroke-width: 2px;" />
  </g>
</g>
复制代码
3、脖子

效果：

代码：

<!-- 脖子 -->
<g id="neck">
  <rect x="75" y="195" width="150" height="20" rx="8" ry="8" style="fill: #C13901; stroke: #333333; stroke-width: 2px;"/>
  <!-- 铃铛 -->
  <g id="ring">
    <circle cx="150" cy="218" r="15" style="fill: #F5ED27; stroke: #333333; stroke-width: 2px;"/>
    <line x1="138" y1="208" x2="162" y2="208" style="fill: none; stroke: #333333; stroke-width: 2px;" />
    <line x1="135" y1="212" x2="165" y2="212" style="fill: none; stroke: #333333; stroke-width: 2px;" />
    <circle cx="150" cy="220" r="5" />
    <line x1="150" y1="225" x2="150" y2="233" style="fill: none; stroke: #333333; stroke-width: 2px;" />
  </g>
</g>
复制代码
完整代码
<svg width="300" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes eyeballAni {
      from {
        transform: translateY(-10px);
      }
      to {
        transform: translateY(5px);
      }
    }
    .eyeball {
      animation: eyeballAni ease 2s infinite;
    }
  </style>
  <!-- 头 -->
  <g id="head">
    <circle cx="150" cy="115" r="105" style="fill: #06B6E1; stroke: #333333; stroke-width: 2px;"/>
    <circle cx="150" cy="130" r="80" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
    <!-- 眼睛 -->
    <g id="eye">
      <ellipse cx="120" cy="70" rx="30" ry="35" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
      <circle class="eyeball" cx="135" cy="85" r="5" />
      <ellipse cx="180" cy="70" rx="30" ry="35" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
      <circle class="eyeball" cx="165" cy="85" r="5" />
    </g>
    <!-- 鼻子 -->
    <circle id="nose" cx="150" cy="110" r="15" style="fill: #C93E01; stroke: #333333; stroke-width: 2px;"/>
    <!-- 嘴巴 -->
    <g id="mouth">
      <line x1="150" y1="125" x2="150" y2="180" style="fill: #333333; stroke: #333333; stroke-width: 2px;" />
      <path d="
        M 100 157,
        A 80 100 0 0 0 200 157
      " style="fill: none; stroke: #333333; stroke-width: 2px;" />
    </g>
    <!-- 胡须 -->
    <g id="moustache">
      <g>
        <line x1="90" y1="110" x2="130" y2="125" style="fill: none; stroke: #333333; stroke-width: 2px;" />
        <line x1="90" y1="130" x2="130" y2="130" style="fill: none; stroke: #333333; stroke-width: 2px;" />
        <line x1="90" y1="150" x2="130" y2="135" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      </g>
      <g>
        <line x1="170" y1="125" x2="210" y2="110" style="fill: none; stroke: #333333; stroke-width: 2px;" />
        <line x1="170" y1="130" x2="210" y2="130" style="fill: none; stroke: #333333; stroke-width: 2px;" />
        <line x1="170" y1="135" x2="210" y2="150" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      </g>
    </g>
  </g>
  <!-- 身体 -->
  <g id="body">
    <!-- 身体轮廓 -->
    <path d="
      M 80 215,
      L 30 245,
      L 45 285,
      L 85 265,
      L 85 340,
      L 140 340,
      A 15 50 0 0 1 160 340,
      L 215, 340,
      L 215 265,
      L 255 285,
      L 270 245,
      L 220 215,
      Z
    " style="fill: #06B6E1; stroke: #333333; stroke-width: 2px;" />
    <!-- 手 -->
    <g id="hand">
      <circle cx="40" cy="265" r="25" style="fill: white; stroke: #333333; stroke-width: 2px" />
      <circle cx="260" cy="265" r="25" style="fill: white; stroke: #333333; stroke-width: 2px" />
    </g>
    <!-- 脚 -->
    <g id="foot">
      <path d="
        M 85 340,
        A 2 2 0 0 0 80 360,
        L 140 360,
        A 1.5 2 0 0 0 140 340,
        Z
      " style="fill: white; stroke: #333333; stroke-width: 2px;" />
      <path d="
        M 215 340,
        A 2 2 0 0 1 220 360,
        L 160 360,
        A 1.5 2 0 0 1 160 340,
        Z
      " style="fill: white; stroke: #333333; stroke-width: 2px;" />
    </g>
    <!-- 肚子 -->
    <g id="tummy">
      <circle cx="150" cy="255" r="58" style="fill: white; stroke: #333333; stroke-width: 2px;"/>
      <path d="
        M 110 250,
        A 40 50 0 0 0 190 250,
        Z
      " style="fill: white; stroke: #333333; stroke-width: 2px;" />
    </g>
  </g>
  <!-- 脖子 -->
  <g id="neck">
    <rect x="75" y="195" width="150" height="20" rx="8" ry="8" style="fill: #C13901; stroke: #333333; stroke-width: 2px;"/>
    <!-- 铃铛 -->
    <g id="ring">
      <circle cx="150" cy="218" r="15" style="fill: #F5ED27; stroke: #333333; stroke-width: 2px;"/>
      <line x1="138" y1="208" x2="162" y2="208" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <line x1="135" y1="212" x2="165" y2="212" style="fill: none; stroke: #333333; stroke-width: 2px;" />
      <circle cx="150" cy="220" r="5" />
      <line x1="150" y1="225" x2="150" y2="233" style="fill: none; stroke: #333333; stroke-width: 2px;" />
    </g>
  </g>
</svg>
复制代码

总结

画这个主要功夫还是花在找坐标上，动画可以用svg的animate标签，也可以css的animation动画，如果是单独的svg文件，可以把style标签样式写在svg标签内实现动画效果

下一篇文章会用svg结合css实现一些Loading效果，实现起来效果挺好的

转载于:https://juejin.im/post/5c9375605188252d6019258d

weixin_34198453
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+SVG实现的可爱娃娃笑脸动画
09-25
是一款利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是非常可爱。
使用SVG画漂亮的图形
lifeifeixz的博客
04-24 321
<?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" id="box"> <!-- .
探索文本驱动的SVG绘制新境界：SVGDreamer深入解析
最新发布
gitblog_00055的博客
06-19 460
探索文本驱动的SVG绘制新境界：SVGDreamer深入解析 项目地址:https://gitcode.com/ximinng/SVGDreamer 在数字创意与自动化设计的浪潮中，一款名为SVGDreamer的开源项目正逐渐浮出水面，它带着革命性的技术，让文本到矢量图形的转换步入了新的纪元。本文将从四个方面剖析SVGDreamer，带领你领略这款工具的独特魅力，探究其背后的先进技术，并展望其广阔...
用html制作一朵花,SVG画图功能：svg实现画出一朵花（附代码）
weixin_31889705的博客
06-20 1070
本篇文章给大家带来的内容是关于SVG画图功能：svg实现画出一朵花(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。一、创建一个 XXX.svg文件(该文件，创建了一个红色的圆)/p>"http://ww...
svg卡通人物挥手欢呼动画特效
04-25
svg卡通人物挥手欢呼动画特效是一款html5基于svg卡通人物挥手欢呼喝彩表情动画特效。
svg入门制作简易动画
似码非码的博客
03-23 5965
svg的分量越来越重要了，如果你学好了svg也能在前段站住一席之地 今天主要使用svg制作一个简易的人物动画；纯手工制作，有些粗糙，主要是熟悉svg，各位看了之后可以试着画一画 &lt;svg class="runPath" width="1100" height="420" xmlns="http://www.w3.org/2000/svg"&gt; &lt;g id="m
H5-svg-画哆啦A梦
12-22
<svg width=346 height=399> <!-- 头部 --> <path id='path1' d='m 101 236 A 116 116 0 1 1 245 236'> <path id='path2' d='m 118 235 A 93 70 0 1 1 233 236'> <!-- <path id='path3' d='m 231 118 A...
一组12个情人节矢量插画 .svg素材下载
04-20
标题和描述提到的"一组12个情人节矢量插画 .svg素材下载"，显然是一个包含12个与情人节主题相关的SVG图形文件的资源包，适用于设计师们在创作浪漫节日相关的设计作品时使用。 首先，我们要理解SVG的优势。矢量图像...
利用SVG和CSS3来实现一个炫酷的边框动画
01-19
今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给...
一组网站相关插画 .svg .ai .png 素材下载
04-20
这组素材下载包含了一系列...无论是前端开发者寻找网页元素，还是设计师寻找创作素材，这组插画都将是一个宝贵的资源库。对于网页设计师来说，了解并掌握这些格式的特性和应用场景，将有助于提升作品的质量和用户体验。
一组app onboarding插画 .ai .svg .eps素材下载
04-20
一组app onboarding插画 .ai .svg .eps素材下载
h5哆啦A梦机器猫
05-03
html5+javascript 代码实现的一个哆啦A梦机器猫，方便学习h5 Canvas标签的编程爱好者
svg画图(汽车)
01-25
svg画图，用画图工具画的svg格式的汽车，供大家参考
制作svg动画
沫沫酱
07-29 5241
要实现一步一步画出来一个图片，css3做不到吧，除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件，做了一个svg动画。 插件地址：http://lazylinepainter.info/ 先用AI做好路径，保存为svg格式的文件。 使用插件，先引入需要的文件：    window.jQuery || document.write('') demo如下：  
分享9款用HTML5/CSS3制作的动物人物动画
weixin_30322405的博客
05-07 650
1、纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画，非常可爱. 在线演示 源码下载 2、HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 Canvas动画非常炫酷，很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效。今天我们要分享一款HTML5 Canvas头发飘逸动画，该动画模拟头发飘动的效果...
HTML5 SVG可爱笑脸动画
ICode联盟
11-30 522
下载地址 HTML5 SVG可爱笑脸动画是一款利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是非常可爱。function changeFond(){ var couleurFond; var numFond = Math.floor((Math.random() * 10) + 1); switch (numFond) { case 1: couleurFond = "#16a
程序猿必备的10款超有趣的SVG绘制动画赏析
weixin_34143774的博客
12-05 484
SVG作为时下比较新颖的技术标准，已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活，我们将很多网页上的元素使用SVG来绘制而成，有各种人物、小图标、小动画等等。今天我们收集了10个非常新奇有趣的SVG绘制动画，这些动画大部分都是使用SVG结合一定的CSS3特性实现而成，效果让人大为震撼，一起来看看吧。 1、HTML5 SVG实现会跳舞的花朵 4种跳舞心情 这又是一款很有趣的HTM...
[HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
我的Github
04-17 4822
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画，点击观看演示，兼容性并不好，只有webkit支持动画，ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。 先来看下演示，目前知道的是ie6，7不支持动画，但是绘图还是没有问题的，ie6,7点击观看演示 最近对svg有些研究，先是使用svg代替css3实现qq空间关闭按钮旋转特效，然后是使用svg代替css3绘制oper
纯CSS画图——哆啦A梦
cily
06-24 6824
最近突然想用前端代码画图，然后就去百度找了一张哆啦A梦的图片，用DIV+CSS画，虽然最后的结果还是有些差异，不过也就差不多可以看啦~ dlam.html 哆啦A梦
svg中path标签画一个五边形
02-07
要用 path 标签在 svg 中画一个五边形，可以这样做： 1. 定义 path 标签： ``` ``` 2. 在 d 属性中指定五边形的路径： - M x1 y1：从坐标 (x1, y1) 开始画线。 - L x2 y2：从上一个坐标连接到坐标 (x2, y2)。 -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值