<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./iconfont/iconfont.css">

</head>

<body>

 <!-- <svg class="icon svg-icon" aria-hidden="true">

                  <use xlink:href="#icon1"></use>

                </svg> -->

    <script src="./iconfont/iconfont.js"></script>

    <script>

        let svgns = "http://www.w3.org/2000/svg";

      let xlinkns = "http://www.w3.org/1999/xlink";

        let icon = document.createElementNS(svgns, "svg");

        icon.setAttribute("aria-hidden", true);

        let use = document.createElementNS(svgns, "use");

        use.setAttributeNS(xlinkns, "href", "#icon1");

        icon.appendChild(use);

        document.body.appendChild(icon)

    </script>

</body>

</html>

希望对你们有帮助！

js动态创建svg与use 使用iconfont symbol的更多相关文章

  1. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

  2. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  3. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  4. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  5. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  6. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  7. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. js 动态创建变量

      js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...

  9. 通过js动态创建button

    通过js动态创建button 一.实例描述 通过JS的DOM对象,实现元素的动态创建. 二.效果 三.代码 <!DOCTYPE html> <html lang="zh-c ...

随机推荐

  1. [LC] 244. Shortest Word Distance II

    Design a class which receives a list of words in the constructor, and implements a method that takes ...

  2. http接口与webservice接口的区别

    常见的API接口有两类:http接口和webservice接口. http接口走http协议,通过路径来区分调用方法,请求报文一般是key-value形式的,返回报文一般是json串,常用的是get和 ...

  3. python数据类型：列表List和Set

    python数据类型:列表List, Set集合 序列是Python中最基本的数据结构 序列中每个元素都分配一个数字,表示索引 列表的数据项不需要具有相同的类型        列表中的值可以重复并且有 ...

  4. 解决scoped 下confirm 样式问题

  5. 数字签名和数字证书等openssl加密基本术语

    openssl 算法基础 1.1 对称算法 : 密钥相同,加密解密使用同一密钥 1.2 摘要算法:无论用户输入的数据什么长度,输出的都是固定长度的密文:即信息摘要,可用于判断数据的完整性:目前常用的有 ...

  6. 吴裕雄--天生自然python学习笔记：案例：用正则表达式查找邮件账号

    抓取万水书苑“ ht甲://www.w sbookshow.com/ ”网站中的所有 E-mai l 账号. import requests,re regex = re.compile('[a-zA- ...

  7. 德国、日本的制造业为什么不能完全执行SOP？

    在过去几十年,德国.日本的制造企业简直就是"以质取胜"的代名词,一些制造业的CEO非常自豪,甚至在公开场合调侃:大家好,我就是"保质保量"本人,也正因如此,德国 ...

  8. 默认的Settings.xml文件（无修改过）-Maven

    Tip: 当什么都不作修改时,默认是从Maven中央仓库进行下载,https://repo.maven.apache.org/maven2. 打开maven源码下的lib文件夹,找到maven-mod ...

  9. java.lang.ClassNotFoundException :xxxxxxx

    码的!java.lang.ClassNotFoundException: org.springframework.jdbc.core.RowMapper这个错误搞了半天 因为写的项目是手动建的WEB- ...

  10. nginx代理php项目的websocket

    在http段添加 http { ... map $http_upgrade $connection_upgrade { default upgrade; '' close; } ... } 在serv ...