gpt4 book ai didi

javascript - 无法将形状附加到 svg

转载 作者:行者123 更新时间:2023-11-28 07:02:51 24 4
gpt4 key购买 nike

它在元素(png图像)上的dragstart事件上打印id,但是,形状没有在dragend事件上附加到svg。

window.onload = function ()
{
var svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 803);
};
var shapeId = "";

function getId(id)
{
shapeId = id;
console.log(shapeId);
}

function createShape()
{
if (shapeId == 'newTask')
{
createRect();
}
}

function createRect()
{
console.log("createRect function called");
svg.append("rect")
.attr("id", "onRectDragStart")
.attr("rx", 10)
.attr("width", 51)
.attr("height", 41)
.attr("x", "100")
.attr("y", "100")
.attr("stroke-width", 2)
.attr("stroke", "#7E7E7E")
.style('cursor', 'move')
.style("fill", "white")
.classed("initialDragRect", true);
}

HTML:

<div id="content">
<div style="position: relative; height: 100%;">
<div><a id="newTask" title="Add new task" draggable="true" ondragstart=getId(this.id) ondragend="createShape(this)"><img src="task.png" /></a></div>
</div>
<div id="canvas" tabindex="0"></div>
</div>

createRect() 函数被调用作为其在控制台内的打印消息,但形状没有被附加

createShape(this) 在拖尾事件的 div 标签内被调用

最佳答案

您应该在 DOM 完全加载后加载脚本,因为您正在使用事件与 DOM 交互。

示例:

 <!DOCTYPE HTML>
<html>

<head>
<!-- yada yada yada -->
</head>

<body>
<p id='p1'>Line 1</p>
<script type='text/javascript'>
document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
</script>
<p id='p2'>Line two</p>
</body>

</html>

您看到的输出是:

Line 1
p1 is null? false
p2 is null? true
Line 2

因为 p1 在脚本运行时存在,但 p2 不存在。

检查这个link由谷歌开发人员提供更多信息。帮助这有帮助

关于javascript - 无法将形状附加到 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31961353/

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