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>:

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

        patio11bot

      </object>

Reference by JS

function talk() {

        const svg = document.getElementById('patio11-svg')

        const svgDoc = svg.contentDocument

        const mouth = svgDoc.getElementById("mouth")

        const openMouth = svgDoc.getElementById("open-mouth")

        talkRecurse(mouth, openMouth, )

      }

      function talkRecurse(mouth, openMouth, n) {

        if(n === ) {

          return;

        }

        openMouth.setAttribute('visibility', 'visible')

        mouth.setAttribute('visibility', 'hidden')

        setTimeout(function() {

          mouth.setAttribute('visibility', 'visible')

          openMouth.setAttribute('visibility', 'hidden')

          setTimeout(function() {

            talkRecurse(mouth, openMouth, n-)

          }, Math.random() * )

        }, Math.random() * )

      }

svg:

<?xml version="1.0" encoding="UTF-8"?>

<svg viewBox="0 0 255 296" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

        <g id="Group">

            <rect id="Rectangle-2" fill="#E40408" x="26" y="191" width="203" height="102" rx="17"></rect>

            <rect id="Rectangle-2" fill="#E40408" x="26" y="191" width="203" height="102"></rect>

            <path d="M43,191 L43,293 L26,293 L26,191 L43,191 Z" id="Combined-Shape" fill="#C4090C"></path>

            <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>

            <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>

            <rect id="Rectangle-2" fill="#E40408" x="62" y="179" width="131" height="53" rx="17"></rect>

            <rect id="Rectangle-11" fill="#FAD4C4" x="220" y="65" width="13" height="18" rx="4"></rect>

            <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>

            <path d="M128.208333,214 L128.208333,293.5" id="Line-3" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></path>

            <rect id="Rectangle" fill="#FAD4C4" x="96" y="163" width="64" height="54"></rect>

            <rect id="Path" fill="#F0C7B6" x="24" y="67" width="13" height="14" rx="4"></rect>

            <path d="M160,168 L96,168 L96,163 L160,163 L160,168 Z" id="Combined-Shape" fill="#F0C7B6"></path>

            <rect id="Path" fill="#F0C7B6" x="218" y="67" width="13" height="14" rx="4"></rect>

            <rect id="Rectangle" fill="#FAD4C4" x="26" y="2" width="203" height="162" rx="25"></rect>

            <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>

            <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>

            <ellipse id="Oval-2" stroke="#5C5551" stroke-width="5" cx="81" cy="77" rx="32" ry="23"></ellipse>

            <ellipse id="Oval-2" stroke="#5C5551" stroke-width="5" cx="175" cy="77" rx="32" ry="23"></ellipse>

            <path d="M114.5,77.5 L141.5,77.5" id="Line" stroke="#5C5551" stroke-width="5" stroke-linecap="square"></path>

            <path d="M207.5,76.25 L228.5,63.5" id="Line" stroke="#5C5551" stroke-width="5" stroke-linecap="round"></path>

            <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>

            <circle id="Oval-3" stroke="#FFFFFF" stroke-width="5" fill="#6F7E90" cx="81" cy="77" r="16"></circle>

            <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>

            <circle id="Oval-3" stroke="#FFFFFF" stroke-width="5" fill="#6F7E90" cx="175" cy="77" r="16"></circle>

            <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>

            <path d="M180.5,204.5 L220.5,259.5" id="Line-3" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></path>

            <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>

            <rect id="Rectangle-10" fill="#C4090C" x="114.082355" y="216" width="26.9176454" height="1"></rect>

            <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>

            <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>

            <rect id="Rectangle-6" fill="#F0C7B6" x="236" y="272" width="19" height="2"></rect>

            <rect id="Rectangle-6" fill="#F0C7B6" x="0" y="272" width="19" height="2"></rect>

            <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>

            <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>

            <rect id="Rectangle-12" fill="#E9B3AA" x="98" y="128" width="2" height="1"></rect>

            <rect id="Rectangle-12" fill="#E9B3AA" x="156" y="128" width="2" height="1"></rect>

        </g>

    </g>

</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. Linux下几个命令的技巧

    Ctrl的组合键+a,移动到一行命令的首部+e,移动到一行命令的尾部+左右键,以单词为单位左右移动+u,删除光标之前的所有内容+k,删除光标之后的所有内容Alt+.为引用上一个命令的最后一个参数 还有 ...

  2. nutch 抓取需要登录的网页

    题记:一步一坑,且行且珍惜 最近接到任务,要利用nutch去抓取公司内部系统的文章,可是需要登录才能抓到.对于一个做.net,不熟悉java,不知道hadoop,很少接触linux的我,这个过程真是艰 ...

  3. ELK系列--实时日志分析系统ELK 部署与运行中的问题汇总

    前记: 去年测试了ELK,今年测试了Storm,最终因为Storm需要过多开发介入而放弃,选择了ELK.感谢互联网上各路大神,目前总算是正常运行了. logstash+elasticsearch+ki ...

  4. Eclipse IDE下的Spring框架使用简单实例

    Eclipse IDE下的Spring框架使用简单实例 1 准备Java jdk安装. Eclipse软件安装.根据系统安装32/64版本,选择Eclipse IDE for Java Develop ...

  5. 深度学习应用系列（二） | 如何使用keras进行迁移学习，以训练和识别自己的图片集

    本文的keras后台为tensorflow,介绍如何利用预编译的模型进行迁移学习,以训练和识别自己的图片集. 官网 https://keras.io/applications/ 已经介绍了各个基于Im ...

  6. Bzoj 4524 [Cqoi2016]伪光滑数（堆）

    题面 题解 先筛出$<128$的质数,很少,打个表即可 然后钦定一个质数最大,不断替换即可(丢进大根堆里面,然后取出一个,替换在丢进去即可) 具体来说,设一个四元组$[t,x,y,z]$表示当前 ...

  7. 【最短路径】 SPFA算法

    上一期介绍到了SPFA算法,只是一笔带过,这一期让我们详细的介绍一下SPFA. 1 SPFA原理介绍 SPFA算法和dijkstra算法特别像,总感觉自己讲的不行,同学说我的博客很辣鸡,推荐一个视频讲 ...

  8. oracle中 char，varchar，varchar2的区别

    区别:      1． CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串“abc",对于CHAR (20),表示你存储的字符将占20个字节(包括17个空字符) ...

  9. android 内存泄漏检测工具 LeakCanary 泄漏金丝雀

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 内存泄漏检测工具 android 内存泄漏检测工具 ======== 内存泄漏 就是  无用的对 ...

  10. 【20181020T1】蛋糕

    题面 [正解] 显然先按a排个序,然后用b乱搞 第一问用D开头的定理求最长下降子序列 第二问乱搞 for (int i=1;i<=n;i++) { int* t=upper_bound(f+1, ...