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. [水煮 ASP.NET Web API2 方法论]（1-6）Model Validation

    问题 想要 ASP.NET Web API 执行模型验证,同时可以和 ASP.NET MVC 共享一些验证逻辑. 解决方案 ASP.NET Web API 与 ASP.NET MVC 支持一样的验证机 ...

  2. ps aux 状态介绍

    ps aux 输出 参数 含义 详解 运行 ps aux 的到如下信息:   ps auxUSER    PID   %CPU %MEM VSZ   RSS TTY    STAT   START T ...

  3. ORACLE数据库创建动态表

    最近公司一个项目代码里的定时任务无法执行,查验代码良久,奈何代码过于老旧,开发人员换了一茬又一茬,现在都无法理清,故无奈只好到数据库里重新写存过,配置定时任务. 在写存过时,由于检测及安全性能要求,需 ...

  4. Flask实战第54天：cms删除轮播图功能完成

    后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id ...

  5. Flask实战第37天：服务器权限验证

    完成服务器权限验证之前,我们先如下页面先补上 帖子管理 {% extends 'cms/cms_base.html' %} {% block title %} 帖子管理-CMS管理系统 {% endb ...

  6. 【Jersey】图片上传及显示

    一.前期准备 图片上传需要用到的一些依赖: <dependency> <groupId>org.jvnet.mimepull</groupId> <artif ...

  7. 【二项式定理】【推导】计蒜客17115 2017 ACM-ICPC 亚洲区（西安赛区）网络赛 B. Coin

    题意:投一枚硬币向上的概率是q/p.问你投K枚硬币,向上的枚数为偶数枚的概率是? 要求的即为. 这个东西是个二项展开式的偶数项系数和,来,我们复习一下高中数学,设f(x)=(ax+b)^n,则其偶数项 ...

  8. 【拓扑排序】CDOJ1635 琵琶弦上说相思，当时明月在，曾照彩云归

    对于两个相邻的字符串 Si和Si+1 ,如果它们的前k-1位都相同,第k位不相同,那么,在字典序中 Si,k一定在 Si+1,k前面 建立有向边从 Si,k到 Si+1,k,进行拓扑排序 为了保证字典 ...

  9. 【FFT卷积】BZOJ3527-力

    [题目大意] [思路] 很好这很FFT…… 想了半天也没明白到底什么是卷积∑的上下界,我当初学的时候没说一定要从0开始啊quq 我还是背不出FFT的模板我要狗带了 我上面写的什么乱七八糟的,要什么数学 ...

  10. java阶乘问题

    问题描述: 编写代码求:1!+2!+3!+…+20!的值 代码 public class Demo { public static void main(String[] args) { long nu ...