gpt4 book ai didi

javascript - 即使使用 createElementNS,动态添加的 SVG 元素也不会出现

转载 作者:行者123 更新时间:2023-12-04 07:24:25 24 4
gpt4 key购买 nike

The html code and how it shows up on the inspector
你好,我开始学习一些网络开发。它一直很顺利,直到我尝试在一个组中动态生成一些 SVG 矩形。但是即使代码显示在检查器上,当我将鼠标悬停在动态生成的矩形代码上时,它也会显示“矩形 0x0”,并且不会在视觉上出现。我搜索了许多其他帖子,但没有找到解决方案。

function getMousePosition(svg, event) {
var CTM = svg.getScreenCTM();
if (event.touches) { event = event.touches[0]; }
return {
x: (event.clientX - CTM.e) / CTM.a,
y: (event.clientY - CTM.f) / CTM.d
};
}
var NS = "http://www.w3.org/2000/svg", elemWidth = 80, elemHeight = 40, slotWidth = 10, slotHeight = 10;

function spawnElem(event){
let svg = event.target;
if(event.which == 3){
let pos = getMousePosition(svg, event)
spawnElemHelper(svg, pos.x, pos.y);
}
}

function spawnElemHelper(svg, x, y){
topLeft = {x: x - elemWidth / 2,
y: y - elemHeight / 2
};

// group = document.createElementNS(NS, 'g');
// group.classList.add('draggable-group');

main = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
main.setAttributeNS(NS, 'x', String(topLeft.x));
main.setAttributeNS(NS, 'y', String(topLeft.y));
main.setAttributeNS(NS, 'width', String(elemWidth));
main.setAttributeNS(NS, 'height', String(elemHeight));
main.setAttributeNS(NS, 'fill', 'blue');

// slotInput = document.createElementNS(NS, 'rect');
// slotInput.classList.add("slot");
// slotInput.setAttributeNS(NS, 'x', String(topLeft.x));
// slotInput.setAttributeNS(NS, 'y', String(topLeft.y + (elemHeight - slotHeight) / 2));
// slotInput.setAttributeNS(NS, 'width', String(slotWidth));
// slotInput.setAttributeNS(NS, 'height', String(slotHeight));
// slotInput.setAttributeNS(NS, 'fill', 'yellow');

// slotOutput = document.createElementNS(NS, 'rect');
// slotOutput.classList.add("slot");
// slotOutput.setAttributeNS(NS, 'x', String(topLeft.x + elemWidth - slotWidth));
// slotOutput.setAttributeNS(NS, 'y', String(topLeft.y + (elemHeight - slotHeight) / 2));
// slotOutput.setAttributeNS(NS, 'width', String(slotWidth));
// slotOutput.setAttributeNS(NS, 'height', String(slotHeight));
// slotOutput.setAttributeNS(NS, 'fill', 'yellow');

// group.appendChild(main);
// group.appendChild(slotInput);
// group.appendChild(slotOutput);

//svg.appendChild(group);
svg.appendChild(main);
}
//var svg is the svg element in the HTML which has the id "canvas"
document.getElementById('canvas').addEventListener('mousedown', spawnElem);

最佳答案

SVG 仅将命名空间用于元素而不是属性。属性位于“空”命名空间中。这对于 XML 来说是典型的(有几种格式都这样做),并且命名空间属性需要使用前缀。
您可以使用 setAttribute()setAttributeNS('', ...) :

const xmlns_svg = 'http://www.w3.org/2000/svg';

const svg = document.implementation.createDocument(xmlns_svg, 'svg', null);
svg.documentElement.setAttribute('width', '100');
svg.documentElement.setAttribute('height', '100');

const rect = svg.documentElement.appendChild(
svg.createElementNS(xmlns_svg, 'rect')
);
rect.setAttribute('x', '25');
rect.setAttribute('y', '25');
rect.setAttribute('width', '50');
rect.setAttribute('height', '50');
rect.setAttribute('fill', 'blue');

document.querySelector('div.demo').appendChild(
document.importNode(svg.documentElement, true)
);

const svgData = (new XMLSerializer()).serializeToString(svg);
document.querySelector('img.demo').setAttribute(
'src',
'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData)
);
<div class="demo"></div>

<img class="demo"/>

关于javascript - 即使使用 createElementNS,动态添加的 SVG 元素也不会出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68297683/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com