<!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. Django学习之模型层

    模型层 查看orm内部sql语句的方法的方法 1.如果是queryset对象,那么可以点query直接查看该queryset的内部sql语句 2.在Django项目的配置文件中,配置一下参数即可实现所 ...

  2. 奇点云数据中台技术汇（四）| DataSimba系列之流式计算

    你是否有过这样的念头:如果能立刻马上看到我想要的数据,我就能更好地决策?   市场变化越来越快,企业对于数据及时性的需求,也越来越大,另一方面,当下数据容量呈几何倍暴增,数据的价值在其产生之后,也将随 ...

  3. 系统学习javaweb重点难点1--如何区分<input/>框里的三种常用属性：type属性 name属性 和 value属性

    感想:这是我系统学习javaweb的时候感觉这个是一个初学者十分容易搞混的点 学习笔记: 首先,是type属性. 表单输入项标签之一,用户可以在该标签上通过填写和选择进行数据输入. type属性设置该 ...

  4. 认识shell

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 认识shell 一.由来 第一个流行的 shell 是由 Steven Bourne 发展出来的,为了纪念他所以就称为 ...

  5. django框架基础-ORM进阶-长期维护

    ###############    ORM进阶---contenttype    ################ 设计思路: """ 路飞有两种课,专题课和学位课, ...

  6. python与正则不得不说的故事

    今日所得 正则表达式 re模块 正则表达式:字符 元字符 匹配内容 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线 \s 匹配任意的空白符 \d 匹配数字 \n 匹配一个换行符 \t 匹 ...

  7. ip获取到城市

    <?phpfunction GetIP() {    if ($_SERVER["HTTP_X_FORWARDED_FOR"])        $ip = $_SERVER[ ...

  8. 制作MACOSX 10.9Mavericks安装启动U盘教程

    苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...

  9. HDU-1040-As Easy As A+B(各种排序)

    希尔排序 Accepted 1040 0MS 1224K 564 B G++ #include "cstdio" using namespace std; ]; int main( ...

  10. webpack在用dev-server的时候怎么配置多入口文件

    类似下面这样就可以了,entry设置为对象 每个入口设置为属性,属性的值是一个数组,就可以像单入口一样往这个数组添加entry: { Profile: [ 'webpack-dev-server/cl ...