2

次のドキュメントがあります。ここでは、テキストボックスの各行に1つずつ、いくつかの水平線を追加する予定です。この場合、行は「名前：番号」構造である必要があります。

<!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>

「ウォームアップ」として、キーを押すたびにSVGに行を追加して操作しようとしました。次のテキストを貼り付けました（control + Vで貼り付けるだけで、キーアップイベントがトリガーされます）が、svg子リストは増加しますが、追加の行は表示されません。

私は何が間違っているのですか？（私はjavascriptで非常にn00bであり、インライン<svg>要素の直接操作（ではなく<object>）が非常に不十分に文書化されているため、多くのことを推測します...

読んでくれてありがとう、どんな助けでも大歓迎です！

4

1 に答える 1

3

SVG要素はhttp://www.w3.org/2000/svg名前空間に入るので、代わりに

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

使用する

var line = document.createElementNS ("http://www.w3.org/2000/svg","line");
于 2012-09-24T23:19:30.617 に答える