Я не могу перетащить элемент svg, имеющий viewbox, который динамически добавляется на холсте инструмента svgedit - PullRequest
Новая
       21

Я не могу перетащить элемент svg, имеющий viewbox, который динамически добавляется на холсте инструмента svgedit

0 голосов
/ 08 января 2019

Я работаю над проектом SVG. Мне нужно добавить текст SVG, указав вручную его размер и другие параметры. но здесь нет параметра heght в текстовом элементе svg, поэтому я использую svg в качестве родительского элемента текстового элемента и viewbox из svg, установленный как BBOx текстового элемента. делая это, я могу установить все параметры текста. но после того, как он был добавлен в svg-edit canvas, я не могу его перетащить. Пожалуйста, помогите мне заранее спасибо 

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>

enter image description here

Я могу добавить содержимое на холсте, но не могу перетаскивать его дальше. я использовал внутренний svg и установил viewbox этого svg из BBox текстового элемента

...