クロム拡張子にSVGスプライトを動的に追加します。

Question

クロム拡張機能で、SVGスプライトを表示しようとしていますが、コンテンツを表示していません。私はコンソールにエラーが表示されず、ローカルとオンラインの両方を試しました。私はまた、無駄にIMGタグを使用してみました。私が見つけたその他のアドバイスはすべて、形の構築について語っています。

var svg = div.appendChild(document.createElement("svg")); 
    svg .classList.add("actionButtonImage"); 
var use = svg.appendChild(document.createElement("use")); 
    use .setAttribute("xmlns:xlink"," http://www.w3.org/1999/xlink"); 
    use .setAttribute("xlink:href", href); 

編集：私はページ内のベクトルを作るために見ているわけではない、私は外部のSVGスプライトを使用しています！そして、これを研究する日と半分をspenしてください！

---

これまでのところ私は、あなたがのcreateElementとSVG要素を作成することはできません、あなたははcreateElementNSを必要とSVG namespaceを提供するために、無駄

var svg = div.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg")); 
    svg .classList.add("actionButtonImage"); 
var use = svg.appendChild(document.createElementNS("http://www.w3.org/1999/xlink", "use" )); 
    use .setAttributeNS("http://www.w3.org/1999/xlink","href",href); 

Answer 1

にこれを持っています。

同様に、xlink名前空間で属性を設定するためにsetAttributeを使用することはできませんが、null名前空間にのみ属性を作成できます。 xlink名前空間に属性を設定するには、setAttributeNSを使用する必要があります。

最後に、xmlns：xlinkは実際の属性ではなく、名前空間に正しく属性や要素を作成する副作用としてシリアライザによって作成されるため、setAttributeを使用して作成する必要はありません。