如何使用 javascript 在 svg 中附加 div
How to append a div inside svg with javascript
我想知道如何使用 javascript
以编程方式生成以下 svg
。
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect class="bg" id="bg" x="0" y="0" width="200" height="200" fill="#0357D5"></rect>
<foreignObject x="0" y="0" width="60" height="50">
<div xmlns="http://www.w3.org/1999/xhtml">Thanks </div>
</foreignObject>
</svg>
这是我试过的
const svg = document.querySelector("svg");
const svgns = "http://www.w3.org/2000/svg";
let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute('x',"0");
bg.setAttribute("y","0");
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg);
let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);
let _div = document.createElementNS(svgns, 'div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>
您需要使用 createElement('div')
– 而不是 createElementNS
,因为它不是 svg 元素。
const svg = document.querySelector("#svg");
const svgns = "http://www.w3.org/2000/svg";
let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute('x',"0");
bg.setAttribute("y","0");
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg);
let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);
let _div = document.createElement('div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);
svg{
display:inline-block;
width:20em;
}
<svg id="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>
我想知道如何使用 javascript
以编程方式生成以下 svg
。
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect class="bg" id="bg" x="0" y="0" width="200" height="200" fill="#0357D5"></rect>
<foreignObject x="0" y="0" width="60" height="50">
<div xmlns="http://www.w3.org/1999/xhtml">Thanks </div>
</foreignObject>
</svg>
这是我试过的
const svg = document.querySelector("svg");
const svgns = "http://www.w3.org/2000/svg";
let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute('x',"0");
bg.setAttribute("y","0");
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg);
let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);
let _div = document.createElementNS(svgns, 'div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>
您需要使用 createElement('div')
– 而不是 createElementNS
,因为它不是 svg 元素。
const svg = document.querySelector("#svg");
const svgns = "http://www.w3.org/2000/svg";
let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute('x',"0");
bg.setAttribute("y","0");
bg.setAttribute("width", "200");
bg.setAttribute("height", '200');
bg.setAttribute("fill","#0357D5");
svg.appendChild(bg);
let fo = document.createElementNS(svgns, 'foreignObject');
fo.setAttribute("x", "0");
fo.setAttribute("y", "0");
fo.setAttribute("width", "60");
fo.setAttribute("height", "50");
svg.appendChild(fo);
let _div = document.createElement('div');
_div.setAttribute("xmlns", 'http://www.w3.org/1999/xhtml');
_div.textContent = 'Thanks';
svg.appendChild(_div);
fo.appendChild(_div);
svg{
display:inline-block;
width:20em;
}
<svg id="svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
</svg>