zoukankan      html  css  js  c++  java
  • [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

    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, 10)
          }
    
          function talkRecurse(mouth, openMouth, n) {
            if(n === 0) {
              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-1)            
              }, Math.random() * 250)
            }, Math.random() * 250)
          }

    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>
    View Code
  • 相关阅读:
    主效应|处理误差 |组间误差|处理效应|随机误差|组内误差|误差|效应分析|方差齐性检验|SSE|SSA|SST|MSE|MSA|F检验|关系系数|完全随机化设计|区组设计|析因分析
    第二类错误|检验统计量|左偏|右偏|P值
    估计量|估计值|置信度|置信水平|非正态的小样本|t分布|大样本抽样分布|总体方差|
    参数|统计量|抽样分布|估计标准误差|标准误差|标准误|标准差|二项分布|泊松分布|中心极限定理|样本方差|
    ruby 分析日志,提取特定记录
    find 找出大文件
    momentjs 求小时差异
    linux下对date和timestamp的互转
    golang protobuf SetExtension
    对文本中的某两列求和,请统计重复出现次数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10363624.html
Copyright © 2011-2022 走看看