javascript - 我无法拖放具有视图框的 svg 元素，该视图框动态附加在 svgedit 工具的画布中
问题描述
我正在开发一个 SVG 项目，我必须通过手动提供其大小和其他参数来添加 svg 文本。但是 svg 文本元素中没有 heght 参数，所以我使用 svg 作为文本元素的父元素，并将 svg 的视图框设置为文本元素的 BBOx。通过这样做，我可以将所有参数设置为文本。但是在它被添加到 svg-edit 画布中后，我无法拖放它。请帮助我提前谢谢
function opacityValue() {
var opValue = document.getElementById("myRange").value;
document.getElementById("opacityValue").textContent = "(" + opValue / 100 + ")";
}
//
function txtOnFloor() {
var color = document.getElementById("clr").value;
var opacity = document.getElementById("myRange").value / 100;
var fontFamily = document.getElementById("family").value;
var svgs = document.getElementById("svgcontent");
var svg = svgs.getElementsByTagName("g")[0];
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
var g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
var rectNull = document.createElementNS("http://www.w3.org/2000/svg", "rect");
var svgText = document.createElementNS("http://www.w3.org/2000/svg", "text");
var innerSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgTexttemp = document.getElementById("bg_svgtext").value;
/////
var width1 = parseInt(document.getElementById("w1").value);
var width2 = document.getElementById("w2").value;
if (width2 != null || width2 != 0) {
width2 = parseInt(width2) / 100;
}
else {
width2 = 0;
}
var width = width1 + width2;
var depth1 = parseInt(document.getElementById("d1").value);
var depth2 = document.getElementById("d2").value;
if (depth2 != null || depth2 != 0) {
depth2 = parseInt(depth2) / 100;
}
else {
depth2 = 0;
}
var depth = depth1 + depth2;
//g decoration
g.setAttribute("id", "bg_group");
g2.style.overflow = "visible";
//text decoration
svgText.setAttribute("fill", "" + color + "");
svgText.setAttribute("opacity", "" + opacity + "");
svgText.setAttribute("x", "0");
svgText.setAttribute("y", "0");
svgText.setAttribute("id", "bg_text");
svgText.textContent = svgTexttemp;
if (fontFamily == "Fira Bold") {
svgText.setAttribute("font-family", "Fira");
svgText.setAttribute("font-weight", "bold");
}
else if (fontFamily == "Verdana Bold") {
svgText.setAttribute("font-family", "Verdana");
svgText.setAttribute("font-weight", "bold");
}
else if (fontFamily == "Arial Bold") {
svgText.setAttribute("font-family", "Arial");
svgText.setAttribute("font-weight", "bold");
}
else if (fontFamily == "Calibri Bold") {
svgText.setAttribute("font-family", "Calibri");
svgText.setAttribute("font-weight", "bold");
}
else {
svgText.setAttribute("font-family", "" + fontFamily + "");
}
////rect decoration
rectNull.setAttribute("x", "0");
rectNull.setAttribute("y", -depth);
rectNull.setAttribute("width", width);
rectNull.setAttribute("height", depth);
rectNull.setAttribute("stroke", "black");
rectNull.setAttribute("fill", "none");
////innerSvg decoration
innerSvg.setAttribute("width", width);
innerSvg.setAttribute("height", depth);
innerSvg.setAttribute("x", "0");
innerSvg.setAttribute("y", "0");
innerSvg.setAttribute("id", "svg");
innerSvg.setAttribute("preserveAspectRatio", "xMinYMin meet");
innerSvg.appendChild(svgText);
g.appendChild(innerSvg);
svg.appendChild(g);
var box = svgText.getBBox();
var viewBox = [box.x, box.y, box.width, box.height].join(" ");
innerSvg.setAttribute("viewBox", viewBox);
}<body>
<div class="table table-bordered" id="btext" style="border:none;">
<div class="bTexts">
<span style="color:#000;font-size:15px; font-family:Helvetica">Text Value:</span><br />
<input type="text" id="bg_svgtext" placeholder="Enter your text value" value="Floor Plan" style="font-size:14px;height:16px; width:220px;margin-top:7px;font-family:Helvetica" />
</div>
<div>
<table style="margin-top:10px;color:#000;font-size:13px; font-weight:bold; font-family:Helvetica;">
<tr>
<td style="padding:0px; padding-right:22px;"><span style="">Width:</span></td>
<td style="padding:0px; padding-right:22px;"><input id="w1" type="text" name="width" value="100" style="width:30px;height:16px;" />m</td>
<td style="padding:0px; padding-right:22px;"><input id="w2" type="text" name="width" value="0" style="width:30px;height:16px;" />cm</td>
</tr>
<tr style="">
<td style="padding:0px; padding-right:22px;padding-top:8px;"><span style="">Depth:</span></td>
<td style="padding:0px; padding-right:22px;padding-top:8px;"><input id="d1" type="text" name="Depth" value="100" style="width:30px;height:16px;" />m</td>
<td style="padding:0px; padding-right:22px;padding-top:8px;"><input id="d2" type="text" name="Depth" value="0" style="width:30px;height:16px;" />cm</td>
</tr>
</table>
</div>
<div class="boothname" style="margin-bottom:10px;padding-left:0px;">
<span style="font-family: Helvetica; font-size:15px;">Font Settings</span>
</div>
<div>
<table style="color:#000;font-size:13px; width:210px; font-weight:bold; font-family:Helvetica;">
<tr>
<td><span style="padding-right:20px;">Font</span></td>
<td style="padding-left:60px;">
<select id="family" style="color:black; width:100px; height:23px; font-size:11px;padding: 2px 26px 2px 10px !important;background-position: calc(114% - 22px) calc(1em + 0px), calc(114% - 17px) calc(1em + 0px), 120% 0;" class="form-control classic ddldesign">
<option style="font-size:12px;" value="Fira">Fira</option>
<option style="font-size:12px;" value="Fira Bold">Fira Bold</option>
<option style="font-size:12px;" value="Verdana">Verdana</option>
<option style="font-size:12px;" value="Verdana Bold">Verdana Bold</option>
<option style="font-size:12px;" value="Calibri">Calibri</option>
<option style="font-size:12px;" value="Calibri Bold">Calibri Bold</option>
<option style="font-size:12px;" value="Arial">Arial</option>
<option style="font-size:12px;" value="Arial Bold">Arial Bold</option>
</select>
</td>
</tr>
<tr>
<td><span>Color</span></td>
<td style="padding-left:60px;"><input type="color" style="width:20px;" name="color" value="#046FAA" id="clr" /></td>
</tr>
<tr>
<td><span>Alpha</span></td>
<td style="padding-left:60px;">
<input type="range" oninput="opacityValue()" min="0" max="100" value="100" style="width:50px;float:left;" id="myRange">
<span id="opacityValue" style="margin-left:5px;">(1)</span>
</td>
</tr>
</table>
</div>
<div class="boothname" style="margin-bottom:10px;padding-left:0px;">
<div style="font-family: Helvetica; font-size:15px;">Click For Add To The Floor</div>
<div style="margin-left:85px; margin-top:5px;"><button class="btn" style="height:26px; padding: 5px 20px" onclick="txtOnFloor()">Add</button></div>
</div>
</div>
<div>
<svg id="svgcontent">
<g></g>
<g></g>
</svg>
</div>
我可以在画布中添加内容，但我不能进一步拖放。我使用了内部 svg 并从文本元素的 BBox 设置了该 svg 的视图框
解决方案
推荐阅读
- javascript - chrome扩展中的远程加载iframe无法访问chrome属性
- javascript - 如何测试合约接收 ERC721 代币的能力？
- php - 如何让 Composer/PSR-4 在子文件夹中接受我的第二个命名空间？
- django - 我如何过滤带有关系的查询 Django 表单
- spring - Spring MVC：我无法修改产品代码（主键）
- javascript - 如何使用单元格引用重命名新的谷歌工作表？
- php - 如何使用目录名称作为 apache.conf 的变量？
- c++ - ifstream 不会找到文件，即使它在同一个目录中
- javascript - 如何返回要在第一个函数中使用的值？
- android - 不允许更改请勿打扰状态，在 Worker 中使用 AudioManager setRingerMode(int i)