We want to show an SVG avatar of the patio11bot, so we'll do that in three ways:

  1. Using an img tag - which is easy, but doesn't let us access the internal SVG elements.

  2. Copy/pasting the SVG directly into the HTML document. That works great, but is really messy in the code

  3. Using an object tag to embed the SVG directly into the web page. We'll choose this solution because it's tidy, and also because it allows us to access the internal SVG elements.

Using <object>:

  1.       <object type="image/svg+xml" data="patio11.svg" id="patio11-svg">
  2.         patio11bot
  3.       </object>

Reference by JS

  1. function talk() {
  2.         const svg = document.getElementById('patio11-svg')
  3.         const svgDoc = svg.contentDocument
  4.         const mouth = svgDoc.getElementById("mouth")
  5.         const openMouth = svgDoc.getElementById("open-mouth")
  6.         talkRecurse(mouth, openMouth, )
  7.       }
  8.  
  9.       function talkRecurse(mouth, openMouth, n) {
  10.         if(n === ) {
  11.           return;
  12.         }
  13.         openMouth.setAttribute('visibility', 'visible')
  14.         mouth.setAttribute('visibility', 'hidden')
  15.         setTimeout(function() {
  16.           mouth.setAttribute('visibility', 'visible')
  17.           openMouth.setAttribute('visibility', 'hidden')
  18.  
  19.           setTimeout(function() {
  20.             talkRecurse(mouth, openMouth, n-)
  21.           }, Math.random() * )
  22.         }, Math.random() * )
  23.       }

svg:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg viewBox="0 0 255 296" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3.     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  4.         <g id="Group">
  5.             <rect id="Rectangle-2" fill="#E40408" x="26" y="191" width="203" height="102" rx="17"></rect>
  6.             <rect id="Rectangle-2" fill="#E40408" x="26" y="191" width="203" height="102"></rect>
  7.             <path d="M43,191 L43,293 L26,293 L26,191 L43,191 Z" id="Combined-Shape" fill="#C4090C"></path>
  8.             <path d="M255,272 L236,272 L236,191 L238,191 C247.388841,191 255,198.611159 255,208 L255,272 Z" id="Combined-Shape" fill="#E40408"></path>
  9.             <path d="M255,272 L255,276 C255,285.388841 247.388841,293 238,293 L236,293 L236,272 L255,272 Z" id="Combined-Shape" fill="#FAD4C4"></path>
  10.             <rect id="Rectangle-2" fill="#E40408" x="62" y="179" width="131" height="53" rx="17"></rect>
  11.             <rect id="Rectangle-11" fill="#FAD4C4" x="220" y="65" width="13" height="18" rx="4"></rect>
  12.             <path d="M26,65 L31,65 C33.209139,65 35,66.790861 35,69 L35,79 C35,81.209139 33.209139,83 31,83 L26,83 C23.790861,83 22,81.209139 22,79 L22,69 C22,66.790861 23.790861,65 26,65 Z M223,67 L228,67 C230.209139,67 232,68.790861 232,71 L232,77 C232,79.209139 230.209139,81 228,81 L223,81 C220.790861,81 219,79.209139 219,77 L219,71 C219,68.790861 220.790861,67 223,67 Z" id="Rectangle-11" fill="#FAD4C4"></path>
  13.             <path d="M128.208333,214 L128.208333,293.5" id="Line-3" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></path>
  14.             <rect id="Rectangle" fill="#FAD4C4" x="96" y="163" width="64" height="54"></rect>
  15.             <rect id="Path" fill="#F0C7B6" x="24" y="67" width="13" height="14" rx="4"></rect>
  16.             <path d="M160,168 L96,168 L96,163 L160,163 L160,168 Z" id="Combined-Shape" fill="#F0C7B6"></path>
  17.             <rect id="Path" fill="#F0C7B6" x="218" y="67" width="13" height="14" rx="4"></rect>
  18.             <rect id="Rectangle" fill="#FAD4C4" x="26" y="2" width="203" height="162" rx="25"></rect>
  19.             <path d="M69,2 C55.1928813,2 44,13.1928813 44,27 L44,163.006769 C33.5999189,159.979407 26,150.377231 26,139 L26,27 C26,13.1928813 37.1928813,2 51,2 L69,2 Z" id="Combined-Shape" fill="#F0C7B6"></path>
  20.             <path d="M229,35 C229,21.1928813 217.807119,10 204,10 L51,10 C37.1928813,10 26,21.1928813 26,35 L26,25 C26,11.1928813 37.1928813,2.53632657e-15 51,0 L204,0 C217.807119,-2.53632657e-15 229,11.1928813 229,25 L229,35 Z" id="Combined-Shape" fill="#765D4E"></path>
  21.             <ellipse id="Oval-2" stroke="#5C5551" stroke-width="5" cx="81" cy="77" rx="32" ry="23"></ellipse>
  22.             <ellipse id="Oval-2" stroke="#5C5551" stroke-width="5" cx="175" cy="77" rx="32" ry="23"></ellipse>
  23.             <path d="M114.5,77.5 L141.5,77.5" id="Line" stroke="#5C5551" stroke-width="5" stroke-linecap="square"></path>
  24.             <path d="M207.5,76.25 L228.5,63.5" id="Line" stroke="#5C5551" stroke-width="5" stroke-linecap="round"></path>
  25.             <path d="M26.5,75.25 L47.5,62.5" id="Line" stroke="#5C5551" stroke-width="5" stroke-linecap="round" transform="translate(37.000000, 69.000000) scale(-1, 1) translate(-37.000000, -69.000000) "></path>
  26.             <circle id="Oval-3" stroke="#FFFFFF" stroke-width="5" fill="#6F7E90" cx="81" cy="77" r="16"></circle>
  27.             <path d="M158,118 L158,142 C158,144.209139 156.209139,146 154,146 L102,146 C99.790861,146 98,144.209139 98,142 L98,118 L158,118 Z" id="open-mouth" fill="#E9B3AA" visibility="hidden"></path>
  28.             <circle id="Oval-3" stroke="#FFFFFF" stroke-width="5" fill="#6F7E90" cx="175" cy="77" r="16"></circle>
  29.             <path d="M19,272 L19,276 C19,285.388841 11.3888407,293 2,293 L0,293 L0,272 L19,272 Z" id="Combined-Shape" fill="#FAD4C4" transform="translate(9.500000, 282.500000) scale(-1, 1) translate(-9.500000, -282.500000) "></path>
  30.             <path d="M180.5,204.5 L220.5,259.5" id="Line-3" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></path>
  31.             <path d="M34.5,204.5 L74.5,259.5" id="Line-3" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" transform="translate(54.500000, 232.000000) scale(-1, 1) translate(-54.500000, -232.000000) "></path>
  32.             <rect id="Rectangle-10" fill="#C4090C" x="114.082355" y="216" width="26.9176454" height="1"></rect>
  33.             <rect id="Rectangle-5" fill="#E40408" transform="translate(157.142305, 210.547749) rotate(-60.000000) translate(-157.142305, -210.547749) " x="127.642305" y="198.547749" width="59" height="24"></rect>
  34.             <rect id="Rectangle-5" fill="#E40408" transform="translate(99.142305, 210.547749) scale(-1, 1) rotate(-60.000000) translate(-99.142305, -210.547749) " x="69.6423048" y="198.547749" width="59" height="24"></rect>
  35.             <rect id="Rectangle-6" fill="#F0C7B6" x="236" y="272" width="19" height="2"></rect>
  36.             <rect id="Rectangle-6" fill="#F0C7B6" x="0" y="272" width="19" height="2"></rect>
  37.             <path d="M19,272 L0,272 L0,191 L2,191 C11.3888407,191 19,198.611159 19,208 L19,272 Z" id="Combined-Shape" fill="#E40408" transform="translate(9.500000, 231.500000) scale(-1, 1) translate(-9.500000, -231.500000) "></path>
  38.             <path d="M158,129 L158,130 C158,132.209139 156.209139,134 154,134 L102,134 C99.790861,134 98,132.209139 98,130 L98,129 L158,129 Z" id="mouth" fill="#E9B3AA"></path>
  39.             <rect id="Rectangle-12" fill="#E9B3AA" x="98" y="128" width="2" height="1"></rect>
  40.             <rect id="Rectangle-12" fill="#E9B3AA" x="156" y="128" width="2" height="1"></rect>
  41.         </g>
  42.     </g>
  43. </svg>

[HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript的更多相关文章

  1. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  2. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  3. html5 Canvas和SVG的区别是什么（总结）

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  4. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  5. HTML5中使用SVG

    SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

  6. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  8. HTML5学习(六)---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

  9. HTML5学习(五)----SVG

    参考教程地址:http://www.w3school.com.cn/html5/html_5_svg.asp HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalabl ...

随机推荐

  1. CentOS7安装和配置samba

    (1)samba简介 CIFS:通用的internet文件系统,windows和unix系统之间共享文件的一种协议;客户端主要是windows:支持多节点同时挂载以及并发写入 (2)samba主配置文 ...

  2. react native android应用启动画面

    参考地址:https://www.youtube.com/watch?v=rnLR65OGtic 第一步:生成启动画面的背景图片 生成一个2048*2048的背景图片,打开网站https://apet ...

  3. 推荐开源靶场Vulhub

    转:https://github.com/phith0n/vulhub Vulhub - Some Docker-Compose files for vulnerabilities environme ...

  4. HDU 1561 The more, The Better【树形DP/有依赖的分组背包】

    ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M个城堡并获得里面的宝物.但由于地理位置原因,有些城堡不能直接攻克,要攻克这些城堡必须先 ...

  5. STM32通用定时器实现LED灯闪烁

    刚才看了一下STM32通用定时器的教程,其实和51的定时器使用差不多.只是因为32的时钟更复杂,可操控的寄存器更多,所以写的时候可能更复杂. 使用通用定时器中断的一般步骤:1.使能定时器时钟 这个需要 ...

  6. 洛谷——P1123 取数游戏

    P1123 取数游戏 题目描述 一个N×M的由非负整数构成的数字矩阵,你需要在其中取出若干个数字,使得取出的任意两个数字不相邻(若一个数字在另外一个数字相邻8个格子中的一个即认为这两个数字相邻),求取 ...

  7. Codeforces Round #277 (Div. 2) D. Valid Sets (DP DFS 思维)

    D. Valid Sets time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. nyoj 151 Biorhythms

    描述 Some people believe that there are three cycles in a person's life that start the day he or she i ...

  9. Friends number NBUT - 1223 （暴力打表）

    Paula and Tai are couple. There are many stories between them. The day Paula left by airplane, Tai s ...

  10. PIE.htc的使用

    文件下载:http://css3pie.com/download/ 使用: .pie_radius{ width:200px; height:200px; background-color:red; ...