SVG & lt;用gt;标记现在显示时，编程插入
SVG <use> tag now showing up when programmatically inserted
我一直在这里跟随这个链接，并试图添加一些SVG图标与<use>标签。当我"硬编码"SVG并直接在HTML代码中使用标记时，我已经能够使它工作。但是当我尝试从javascript中做完全相同的事情时，代码被创建并正确插入，但SVG没有显示在屏幕上!
<html>
<head>
<script language="javascript" type="text/javascript" src="d3.v3.min.js"></script>
<script language="javascript" type="text/javascript" src="data/data.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body id="body" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; margin:0px; ">
<!-- icons -->
<svg id="svgIcons">
<defs>
<g id="Email" stroke="#DCDECE" stroke-width="2" fill="#DCDECE">
<path d="M93.1007556,0 L6.57850438,0 C3.32044167,0 0.679259984,2.62722336 0.679259984,5.86806762 L0.679259984,56.7246537 C0.679259984,59.9654979 3.32044167,62.5927213 6.57850438,62.5927213 L93.1007556,62.5927213 C96.3588183,62.5927213 99,59.9654979 99,56.7246537 L99,5.86806762 C99,2.62722336 96.3588183,0 93.1007556,0 L93.1007556,0 Z M95.0671704,56.7246537 C95.0671704,57.8049351 94.1867765,58.6806762 93.1007556,58.6806762 L6.57850438,58.6806762 C5.49248348,58.6806762 4.61208958,57.8049351 4.61208958,56.7246537 L4.61208958,5.86806762 C4.61208958,4.7877862 5.49248348,3.91204508 6.57850438,3.91204508 L93.1007556,3.91204508 C94.1867765,3.91204508 95.0671704,4.7877862 95.0671704,5.86806762 L95.0671704,56.7246537 L95.0671704,56.7246537 Z M83.4849872,13.281393 L61.8544244,29.9271449 L83.4849872,46.5924569 C84.0904335,47.0008128 84.4179624,47.7097175 84.3352106,48.4326834 C84.2524588,49.1556494 83.7731053,49.7731707 83.0908696,50.0356904 C82.4086339,50.29821 81.6362893,50.1623337 81.0859612,49.6829725 L58.5901759,32.4112935 L51.039143,38.2793611 C50.3320873,38.8207845 49.3471727,38.8207845 48.640117,38.2793611 L42.2099406,33.2523832 L18.612963,50.4653815 C17.733286,51.1027476 16.5007346,50.9100845 15.8599822,50.0350566 C15.2192299,49.1600286 15.4129166,47.9339911 16.2925935,47.296625 L39.0243486,30.7486743 L16.1942728,13.281393 C15.5888265,12.8730371 15.2612976,12.1641325 15.3440494,11.4411665 C15.4268011,10.7182005 15.9061547,10.1006792 16.5883904,9.83815957 C17.2706261,9.57563991 18.0429706,9.7115163 18.5932988,10.1908774 L49.83963,34.191274 L81.0859612,10.1908774 C81.6362893,9.7115163 82.4086339,9.57563991 83.0908696,9.83815957 C83.7731053,10.1006792 84.2524588,10.7182005 84.3352106,11.4411665 C84.4179624,12.1641325 84.0904335,12.8730371 83.4849872,13.281393 L83.4849872,13.281393 Z" id="Shape"></path>
</g>
</defs>
</svg>
<div id="info" >
<div id="title"> EXTRA INFO </div>
<div class="extraInfo">
<div class="info-icon">
<svg viewbox="0 0 100 100">
<use xlink:href="#Email">
</use>
</svg>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
window.addEventListener("load", function(){
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//adding HTML Elements
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
var div = document.createElement("div")
div.className = "extraInfo";
document.getElementById('info').appendChild(div)
var icon = document.createElement("div")
icon.className = "info-icon"
div.appendChild(icon)
var iconSVG = document.createElement("SVG")
iconSVG.setAttribute("viewBox", "0 0 100 100")
icon.appendChild(iconSVG)
var svgUse = document.createElement("use")
iconSVG.appendChild(svgUse)
svgUse.setAttribute("xlink:href","#Email")
})
</script>
</body>
</html>- SVG区分大小写(元素名称是SVG而不是SVG)。
- SVG元素需要在SVG命名空间中用createElementNS 创建
- xlink:需要使用setAttributeNS 在xlink命名空间中创建href属性
<html>
<head>
<script language="javascript" type="text/javascript" src="d3.v3.min.js"></script>
<script language="javascript" type="text/javascript" src="data/data.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body id="body" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; margin:0px; ">
<!-- icons -->
<svg id="svgIcons">
<defs>
<g id="Email" stroke="#DCDECE" stroke-width="2" fill="#DCDECE">
<path d="M93.1007556,0 L6.57850438,0 C3.32044167,0 0.679259984,2.62722336 0.679259984,5.86806762 L0.679259984,56.7246537 C0.679259984,59.9654979 3.32044167,62.5927213 6.57850438,62.5927213 L93.1007556,62.5927213 C96.3588183,62.5927213 99,59.9654979 99,56.7246537 L99,5.86806762 C99,2.62722336 96.3588183,0 93.1007556,0 L93.1007556,0 Z M95.0671704,56.7246537 C95.0671704,57.8049351 94.1867765,58.6806762 93.1007556,58.6806762 L6.57850438,58.6806762 C5.49248348,58.6806762 4.61208958,57.8049351 4.61208958,56.7246537 L4.61208958,5.86806762 C4.61208958,4.7877862 5.49248348,3.91204508 6.57850438,3.91204508 L93.1007556,3.91204508 C94.1867765,3.91204508 95.0671704,4.7877862 95.0671704,5.86806762 L95.0671704,56.7246537 L95.0671704,56.7246537 Z M83.4849872,13.281393 L61.8544244,29.9271449 L83.4849872,46.5924569 C84.0904335,47.0008128 84.4179624,47.7097175 84.3352106,48.4326834 C84.2524588,49.1556494 83.7731053,49.7731707 83.0908696,50.0356904 C82.4086339,50.29821 81.6362893,50.1623337 81.0859612,49.6829725 L58.5901759,32.4112935 L51.039143,38.2793611 C50.3320873,38.8207845 49.3471727,38.8207845 48.640117,38.2793611 L42.2099406,33.2523832 L18.612963,50.4653815 C17.733286,51.1027476 16.5007346,50.9100845 15.8599822,50.0350566 C15.2192299,49.1600286 15.4129166,47.9339911 16.2925935,47.296625 L39.0243486,30.7486743 L16.1942728,13.281393 C15.5888265,12.8730371 15.2612976,12.1641325 15.3440494,11.4411665 C15.4268011,10.7182005 15.9061547,10.1006792 16.5883904,9.83815957 C17.2706261,9.57563991 18.0429706,9.7115163 18.5932988,10.1908774 L49.83963,34.191274 L81.0859612,10.1908774 C81.6362893,9.7115163 82.4086339,9.57563991 83.0908696,9.83815957 C83.7731053,10.1006792 84.2524588,10.7182005 84.3352106,11.4411665 C84.4179624,12.1641325 84.0904335,12.8730371 83.4849872,13.281393 L83.4849872,13.281393 Z" id="Shape"></path>
</g>
</defs>
</svg>
<div id="info" >
<div id="title"> EXTRA INFO </div>
<div class="extraInfo">
<div class="info-icon">
<svg viewbox="0 0 100 100">
<use xlink:href="#Email">
</use>
</svg>
</div>
</div>
</div>
<script>
window.addEventListener("load", function() {
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//adding HTML Elements
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
var div = document.createElement("div")
div.className = "extraInfo";
document.getElementById('info').appendChild(div)
var icon = document.createElement("div")
icon.className = "info-icon";
div.appendChild(icon)
var iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg")
iconSVG.setAttribute("viewBox", "0 0 100 100");
icon.appendChild(iconSVG);
var svgUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
iconSVG.appendChild(svgUse);
svgUse.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#Email");
})
</script>
</body>
</html>相关文章：
- 这是一个很好的例子，显示了 JavaScript 中的 OOP 和过程编程之间的区别
- 如何以编程方式在 HTML 页面上显示编辑文本字段
- 将按钮添加到导航栏并以编程方式显示它们
- 以编程方式突出显示聚合物纸张输入中的文本
- Dijit 按钮显示图标，但不以编程方式显示标签
- 以编程方式显示代码中的弹出是否弹出
- 如何以编程方式在 Sigma.Js 中显示 overNode 标签
- 在UIWebView中以编程方式显示键盘
- 以编程方式显示Javascript函数文件名
- 以编程方式设置在锚点上时，焦点轮廓不显示
- 引导程序“display.bs.tab”事件未以编程方式触发，显示选项卡(使用tab('show'））
- 突出显示所有在AngularJS中以编程方式改变的输入
- 我如何以编程方式显示/隐藏一个按钮，它是流星主体模板的一部分
- 如何在web编程中显示适合屏幕的图像列表
- 以编程方式显示dijit/Menu
- SVG & lt;用gt;标记现在显示时，编程插入
- 防止显示以编程方式附加的HTML对象，直到对象启动JS完成
- 显示基于PLC(可编程逻辑控制器)变量的图像
- 无法在JQuery Mobile中以编程方式显示对话框
- 以编程方式设置Bootgrid表中显示的行数
