icon使用

zhangql8

错误如下：

Fatal error: The prefix "xlink" for attribute "xlink:href" associated with an element type "use" is not bound.

js增加属性也不显示：$(this.getElementByXid("use")).attr("xlink:href", "#icon-zhongguo");   

http://www.iconfont.cn/help/detail?helptype=code&spm=a313x.7781069.1998910419.13.x1LEktsymbol引用

---

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。
  

使用步骤如下：

第一步：引入项目下面生成的symbol代码：<script src="./iconfont.js"></script>
第二步：加入通用css代码（引入一次就行）：<style type="text/css">.icon {   width: 1em; height: 1em;   vertical-align: -0.15em;   fill: currentColor;   overflow: hidden;}</style>
第三步：挑选相应图标并获取类名，应用于页面：<svg class="icon" aria-hidden="true">  <use xlink:href="#icon-xxx"></use></svg>        

jishuang

加icon跟$(this.getElementByXid("use")).attr("xlink:href", "#icon-zhongguo");   设置什么关系？具体要做什么？

自定义阿里的icon参考http://docs.wex5.com/wex5-ui-question-list-2055/

zhangql8

jishuang 发表于 2017-5-22 10:22
加icon跟$(this.getElementByXid("use")).attr("xlink:href", "#icon-zhongguo");   设置什么关系？具体要 ...

已解决，请关闭

wangjikuen

zhangql8 发表于 2017-5-22 12:38
已解决，请关闭

可否告知一下解决方案呢？非常感谢！

zhangql8

wangjikuen 发表于 2017-9-26 17:11
可否告知一下解决方案呢？非常感谢！

   html = '<svg class="icon" aria-hidden="true" xmlns:xlink="http://www.w3.org/1999/xlink"icon"]+'\')"><use xlink:href="'+imageJson["icon"]+'"></use></svg>';        
   $(this.getElementByXid("icon")).html(html);