1
Я следую этой ссылке here и пытаюсь добавить некоторые значки SVG с тегом <use>. Я смог заставить его работать, когда я «жестко кодирую» SVG и использую тег прямо в HTML-код. Но когда я пытаюсь сделать то же самое с javascript, код создается и вставлен правильно, но SVG не появляется на экране!SVG <use> tag теперь появляется при программном вводе
Вот код, я использую:
<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>
Как это -> https://jsfiddle.net/a1vvvmq5/ – adeneo