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. docker集群

    http://blog.csdn.net/zhaoguoguang/article/details/51161957

  3. iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8001 -j DNAT --to-destination 172.17.0.5:8080 ! -i docker0: iptables: No chain/target/match by that name.

    在docker容器上部署项目后,启动docker容器,出现 iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dpor ...

  4. ceph 安装记录

    ceph 安装 http://docs.ceph.com/docs/master/start/quick-ceph-deploy/ 1. 系统要求 centos 7 systemctl disable ...

  5. [onethink ucenter] 跨域名单点登录关键点

    1.uc_client/data/cache/apps.php <?php $_CACHE['apps'] = array ( 1 => array ( 'appid' => '1' ...

  6. servlet 的控制缓存时间和response的重定向

    //控制缓存时间 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletE ...

  7. Kali Linux WPScan更新到2.9.3

    Kali Linux WPScan更新到2.9.3   WPScan是Kali Linux内置的一款Web漏洞扫描工具,专门扫描WordPress模版构建的网站.该工具最近更新到2.9.3.在新版本中 ...

  8. 【POJ 3974】Palindrome

    http://poj.org/problem?id=3974 Manacher模板题.Menci的博客讲得很好 有一点:Menci的代码中的right我感觉是代表能延伸到的最右端点的右边的点,因为r( ...

  9. BZOJ 2733 [HNOI2012]永无乡（启发式合并+Treap+并查集）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2733 [题目大意] 给出n个点,每个点都有自己的重要度,现在有连边操作和查询操作, 查 ...

  10. [CODECHEF]LCM

    题意:询问满足$1\leq x\leq n,1\leq y\leq m$且$x,y$均无平方因子的有序对$(x,y)$的$[x,y]$之和,多组数据 以下假设$n\leq m$,设$S(n)=\fra ...