是否可以使用JavaScript将SVG对象坐标设置为一个变化的变量？
是否可以使用JavaScript将SVG对象坐标设置为一个变化的变量？
提问于 2019-05-05 08:27:22
我正在使用HTML和JavaSCript创建svg，并希望基于onclick函数向其中添加一些新的svg对象。我想知道是否有可能将新的SVG坐标设置为一个变化的变量。我的想法是这样的：
HTML
<!DOCTYPE html>
<html>
<body>
<svg id="board" width="360" height="360">
<rect x="10" y="10" width="100" height="100"/>
<rect x="130" y="10" width="100" height="100"/>
<rect x="250" y="10" width="100" height="100"/>
<rect x="10" y="130" width="100" height="100"/>
<rect x="130" y="130" width="100" height="100"/>
<rect x="250" y="130" width="100" height="100"/>
<rect x="10" y="250" width="100" height="100"/>
<rect x="130" y="250" width="100" height="100"/>
<rect x="250" y="250" width="100" height="100"/>
</svg>
</body>JS
window.onclick = function(event){
const CX = event.pageX;
const CY = event.pageY;
[...]
drawImage();
}
[...]
function drawImage(){
let coordX = CX/(360/3); //360 is a size of the SVG object
let coordY = CY/(360/3);
function addCircle(){
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", coordX);
circle.setAttribute("cy", coordY);
circle.setAttribute("r", "45");
circle.setAttribute("stroke", "blue");
circle.setAttribute("stroke-width", "10");
circle.setAttribute("fill", "#FCF8C4");
document.getElementById("board").appendChild(circle);
}
}我想形象化新绘制的SVG的基础上点击在特定的地方。这样做有可能吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-05 09:00:52
如果您修复了脚本中的错误，则似乎是可行的。
- 您需要将CX和CY传递给drawImage
- 你真的需要打电话给addCircle
- 您可以直接使用CX和CY。
window.onclick = function(event){
const CX = event.pageX;
const CY = event.pageY;
drawImage(CX, CY);
}
function drawImage(CX, CY){
let coordX = CX;
let coordY = CY;
function addCircle(){
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", coordX);
circle.setAttribute("cy", coordY);
circle.setAttribute("r", "45");
circle.setAttribute("stroke", "blue");
circle.setAttribute("stroke-width", "10");
circle.setAttribute("fill", "#FCF8C4");
document.getElementById("board").appendChild(circle);
}
addCircle();
}<!DOCTYPE html>
<html>
<body>
<svg id="board" width="360" height="360">
<rect x="10" y="10" width="100" height="100"/>
<rect x="130" y="10" width="100" height="100"/>
<rect x="250" y="10" width="100" height="100"/>
<rect x="10" y="130" width="100" height="100"/>
<rect x="130" y="130" width="100" height="100"/>
<rect x="250" y="130" width="100" height="100"/>
<rect x="10" y="250" width="100" height="100"/>
<rect x="130" y="250" width="100" height="100"/>
<rect x="250" y="250" width="100" height="100"/>
</svg>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55990144
复制相关文章
相似问题
腾讯云开发者
