<!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. ckeditor深入挖掘吃透

  2. js手机浏览器video标签会一直置顶，遮盖住弹出层问题

    <video x5-playsinline="" playsinline="" webkit-playsinline="">&l ...

  3. 林轩田机器学习基石课程学习笔记5 — Training versus Testing

    上节课,我们主要介绍了机器学习的可行性.首先,由NFL定理可知,机器学习貌似是不可行的.但是,随后引入了统计学知识,如果样本数据足够大,且hypothesis个数有限,那么机器学习一般就是可行的.本节 ...

  4. Spring中Bean的不同配置方式

    Bean的配置方式一共分为三种: 1.基于XML(适用于第三方类库,无法在类中写注解以及写命名空间的配置等情况) 2.基于注解(适用于大部分情况) 3.基于Java类 以下是三种不同情况的配置方式   ...

  5. baidumap 百度地图，实现多点之间的带方向路线图。

    通过lastVisitAt判断时间先后. 通过三角函数验证角度 再由baidumap 会制线段 绘制三角箭头 比较难看…… 测试个人 因为框架引用baidu 有各种问题失败,为最快实现,以此页作一个独 ...

  6. 使用Spring AOP 实现日志管理(简单教程)

    有时候,我们在做项目时会遇到这样的需求: 给XXX.java中的所有方法加上指定格式的日志输出. 针对这种指定类.或者指定方法进行共性操作的功能,我们完全可以使用Spring AOP来实现. 本文使用 ...

  7. RSA key lengths

    RSA key lengths From http://www.javamex.com/tutorials/cryptography/rsa_key_length.shtml When you cre ...

  8. npm install依赖时，常见错误

    1.npm install依赖时,报错:npm ERR! Unexpected end of JSON input while parsing near '...gin":"^1. ...

  9. kendoUI 免费部分开发部分经验。

    kendo分多个版本,核心UI免费版.NET,JAVA,PHP对应的前后端开发版. 基础免费版开放的UI经多个测试,与收费封装的UI并无区别,收费版提供了后端代码和前端封装语法,使不懂JS前端的也可简 ...

  10. Python野生库

    https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted