Home/ Questions/Q 8575283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:39:30+00:00

I have the following document, where I plan to add some horizontal lines, one

  • 0

I have the following document, where I plan to add some horizontal lines, one for each line of a textbox, where lines should have a “name: number” structure.

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="pragma" content="no-cache"/>    
    <title>Diagrama Audax</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

    <style type="text/css">
        #sidebar {float: left; display: inline-block;}
        #drawing {left: 330px; position: relative;  display: inline-block}
        #Locais {width: 300px; height: 500px;}
        svg {background: #ddd; width: 500px; height: 500px;}
        td, textarea {margin: 0; padding: 0;}
    </style>
</head>

<body>
    <table>
        <tr id="tabela" cols="2">
            <td>
                <textarea id="Locais"></textarea>
            </td>
            <td>
                <svg id="svg">
                    <circle stroke="black" fill="red" cx="200" cy="200" r="100" opacity="0.1"/>
                    <line id="path" x1="0" y1="0" x2="200" y2="200" stroke="black"/>
                </svg>
            </td>
        </tr>
    </table>
</body>

<script>

    // A função abaixo pega a caixa de texto e associa o evento "draw" a ela
    $(function () {
        $("#Locais").keyup(function() {
            valueString = $("#Locais").val();
            if (valueString != "") {
                lines = valueString.replace("\r","").split("\n");
                CPs = [];

                for (i in lines) {
                    eachLine = lines[i];
                    tmpDict = {};
                    values = eachLine.split(":");
                    for (j in values) {
                        eachVal = values[j];
                        tmpDict[j] = eachVal;
                    }
                    CPs.push(tmpDict);
                }
                DrawUsing(CPs);
            }
        })
    });


    function DrawUsing (lista) {
        var svg = document.getElementById("svg");
        for (element in lista) {
            refname = lista[element][0];
            refdist = lista[element][1];
            var line = document.createElement ("line");
            line.setAttribute('stroke', "black");
            line.setAttribute('stroke-width', 1);
            line.setAttribute('x1', 0);
            line.setAttribute('x2', 100);
            line.setAttribute('y1', refdist);
            line.setAttribute('y2', refdist);
            svg.appendChild(line);
            console.log(document.getElementsByTagName("line").length);
        }
    }
</script>
</html>

As a “warm up”, I tried to manipulate the SVG adding lines to it each time I press a key. Having pasted the following text (just pasting it with control+V is enough to trigger keyup event), but although the svg child list increases, no additional line is seen.

What am I doing wrong? (a lot, I suppose, since I am very n00b with javascript, and direct manipulation of inline <svg> elements (as opposed to <object>) is very poorly documented, it seems…

Any help is most welcome, thanks for reading!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    SVG elements go in the http://www.w3.org/2000/svg namespace so instead of 

    var line = document.createElement ("line");

    use

    var line = document.createElementNS ("http://www.w3.org/2000/svg","line");
    • 0