Question

我有以下文档，其中我计划添加一些水平线，一个用于文本框的每一行，其中的行应具有“name：number”结构。

<!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添加线条。粘贴了以下文本（只需用控件+ V粘贴它就足以触发键盘事件），但是虽然svg子列表增加了，但是没有看到额外的行。

我做错了什么？（很多，我想，因为我非常喜欢使用javascript，直接操作内联<svg>元素（而不是<object>）的文档记录非常糟糕，似乎......

非常欢迎任何帮助，感谢阅读！

Answer 1

SVG元素放在http://www.w3.org/2000/svg命名空间中，而不是

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

使用

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

使用javascript将子项附加到内联SVG

1 个答案: