<!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. F5 BIG-IP之一前期随笔（应用交付网络产品）

    ADN:应用交付网络 TMOS:  Traffic  managment  operation  system  (流量管理系统) 一个实时的全应用代理流量管理操作系统             PVA ...

  2. plague|commence|gymnasium|triumph|jump

    N-COUNT 瘟疫:疫病A plague is a very infectious disease that spreads quickly and kills large numbers of p ...

  3. springboot学习笔记：2.搭建你的第一个springboot应用

    1.开发环境 (推荐):jdk1.8+Maven(3.2+)+Intellij IDEA+windows10; 说明: jdk:springboot官方说的很明确,到目前版本的springboot(1 ...

  4. c/c++ main 函数命令行参数的使用

    C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程 序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的是有参函数,则参数在调用 ...

  5. 转-Zeus资源调度系统介绍

    摘要: 本文主要概述阿里巴巴Zeus资源调度系统的背景和实现思路. 本文主线:问题.解决方案.依赖基础知识.工程实践.目标.经验分享.立足企业真实问题.常规解决策略,引出依赖的容器技术.实践方案,所有 ...

  6. 用artifactory搭建maven2内部服务器

    访问http://www.jfrog.org/sites/jfrog/index.html 下载最新的zip包(内置jetty) 下载和解压artifactory.目录结构如下: 这些目录是: bac ...

  7. npm相关说明

    https://my.oschina.net/dkvirus?tab=newest&catalogId=5669676 https://my.oschina.net/dkvirus/blog/ ...

  8. tomcat6版本虚拟目录详细配置

    在tomcat6版本中: 一. 1.[官方文档]本人不推荐. 在tomcat\conf下server.xml中找到 <Host name="localhost"  appBa ...

  9. Angular系列一：Angular程序架构

    Angular程序架构 Angular程序架构 组件:一段带有业务逻辑和数据的Html服务:用来封装可重用的业务逻辑指令:允许你向Html元素添加自定义行为模块: 环境搭建 安装nodeJs安装好no ...

  10. Flask从负到零的一周

    新的一年,因为似乎要做很多的数据库,准备入坑Flask.开了一次讨论,我感觉自己燃起来了.于是,先买了一个号角状的水杯压压惊.目前通过一周的艰辛努力,终于做了一个小网站,支持数据库增删改查,算是从零到 ...