我试图在dom中插入一些SVG图标,但SVG(父节点)总是被use(子节点)替换。有人帮我解决了吗?
const icons = [
"html5" ,
"css3" ,
"javascript" ,
"bootstrap" ,
"sass" ,
"node" ,
"mongodb" ,
"d3" ,
"react" ,
"webpack" ,
"wordpress"
];
const tech_icons = document.querySelector( "#techs__icons" );
icons.forEach( icon=> {
const svg = document.createElement( "svg" );
const use = document.createElement( "use" );
svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
tech_icons.appendChild( use ).appendChild( use );
} );
我可以在控制台中成功登录它们,但它们似乎没有出现在文档中。
我已经将它附加到父节点(techs_icons),但此时无法解决它!
更新的代码
icons.forEach( icon=> {
const tech_icons = document.querySelector( "#techs__icons" );
const svg = document.createElement( "svg" );
svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
const use = document.createElement( "use" );
use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
svg.appendChild( use );
tech_icons.appendChild( svg );
} );
This snapshot seems to work here
仍然不会在DOM中显示。实际上,他们正在被追加,因为当我将它们悬停在检查员身上时,他们就在那里,但不可见。
该代码的第二次更新
看起来你需要在我的svg> use>“假元素”中创建某种“假”元素,就像shadowRoot一样,我实际上不明白为什么浏览器在导入SVG文件时会创建这样的元素!
我在检查元素时发现它并且看到浏览器实际上自动创建了该阴影。
SVG
<symbol id="icon-html5">
<path d="M2 0h28l-2.547 28.751-11.484 3.249-11.419-3.251-2.551-28.749zM11.375 13l-0.309-3.624 13.412 0.004 0.307-3.496-17.568-0.004 0.931 10.68h12.168l-0.435 4.568-3.88 1.072-3.94-1.080-0.251-2.813h-3.479l0.44 5.561 7.229 1.933 7.172-1.924 0.992-10.876h-12.789z"/>
</symbol>
Inspected code showing the auto created shadow element
const tech_icons = document.querySelector( "#techs__icons" );
const fragment = document.createDocumentFragment();
icons.forEach( icon => {
const svg = document.createElement( "svg" );
const use = document.createElement( "use" );
let shadow = use.attachShadow( { mode : open } );
svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
shadow.appendChild( "I am a: child element inside shadowroot (svg>use>shadowroot>ME)" );
svg.appendChild( use );
fragment.appendChild( svg );
});
tech_icons.appendChild( fragment );
所以在这一点上回顾一下:
问题仍然存在,而当将阴影附加到use元素时,DOM或控制台实际上都没有显示任何内容!
我使用这个更正的代码玩你的Codepen:
const icons = [
"html5" ,
"css3" ,
"javascript" ,
"bootstrap" ,
"sass" ,
"node" ,
"mongodb" ,
"d3" ,
"react" ,
"webpack" ,
"wordpress"
];
icons.forEach( icon=> {
const tech_icons = document.getElementById( "techs__icons" );
const svg = document .createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
const use = document .createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute( "xlink:href" , `./src/images/sprites.svg#icon-${icon}` );
svg.appendChild( use );
tech_icons.appendChild( svg );
console.log(tech_icons);
} );
在控制台中检查时,SVG元素被创建并占据文档中DIV的空间,但它们似乎是空的或不可见的。所以我责怪sprites.svg文件。
SVG元素不是标准HTML,因此您需要在createElementNS()
方法中指定SVG名称空间:
const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )
const use = document.createElementNS( 'http://www.w3.org/2000/svg', 'use' )
同样在SVG源文件中,您必须在xmlns
属性中指定名称空间:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-html5">
<path d="M2 0h28l-2.547 28.751-11.484 3.249-11.419-3.251-2.551-28.749zM11.375 13l-0.309-3.624 13.412 0.004 0.307-3.496-17.568-0.004 0.931 10.68h12.168l-0.435 4.568-3.88 1.072-3.94-1.080-0.251-2.813h-3.479l0.44 5.561 7.229 1.933 7.172-1.924 0.992-10.876h-12.789z"/>
</symbol>
</svg>
var mylist = document.getElementById("myList")
list.forEach(item){
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode(item); // Create a text node
node.appendChild(textnode); // Append the text to <li>
mylist.appendChild(node) //Append to<Ul> id="myList"
}