Question

<svg width="100" height="100" style="resize: both;border: 1px solid black">

            <path stroke="red" d="M 0 50L -50 49.73762514629607 L -49 49.04624734724053 L -48 49.23174533867633 L -47 50.12357312274522 L -46 50.90178834764881 L -45 50.85090352453412 L -44 50.01770192510541 L -43 49.168225257371404 L -42 49.083478452084364 L -41 49.84137733119529 L -40 50.74511316047935 L -39 50.96379538628409 L -38 50.296368578709384 L -37 49.356461866643 L -36 49.008221146556885 L -35 49.57181733050385 L -34 50.52908268612003 L -33 50.99991186010727 L -32 50.55142668124169 L -31 49.595962354676935 L -30 49.01196837590714 L -29 49.33636611578703 L -28 50.27090578830787 L -27 50.956375928404505 L -26 50.7625584504796 L -25 49.867648249902224 L -24 49.09442163799338 L -23 49.15377959582483 L -22 49.99114869070959 L -21 50.83665563853606 L -20 50.91294525072763 L -19 50.149877209662954 L -18 49.24901275322832 L -17 49.03860250812044 L -16 49.712096683334934 L -15 50.65028784015712 L -14 50.99060735569487 L -13 50.42016703682664 L -12 49.46342708199956 L -11 49.000009793449294 L -10 49.45597888911063 L -9 50.412118485241756 L -8 50.98935824662338 L -7 50.65698659871879 L -6 49.72058450180107 L -5 49.04107572533686 L -4 49.24319750469207 L -3 50.141120008059865 L -2 50.90929742682568 L -1 50.8414709848079 L 0 50 L 1 49.1585290151921 L 2 49.09070257317432 L 3 49.858879991940135 L 4 50.75680249530793 L 5 50.95892427466314 L 6 50.27941549819893 L 7 49.34301340128121 L 8 49.01064175337662 L 9 49.587881514758244 L 10 50.54402111088937 L 11 50.999990206550706 L 12 50.53657291800044 L 13 49.57983296317336 L 14 49.00939264430513 L 15 49.34971215984288 L 16 50.287903316665066 L 17 50.96139749187956 L 18 50.75098724677168 L 19 49.850122790337046 L 20 49.08705474927237 L 21 49.16334436146394 L 22 50.00885130929041 L 23 50.84622040417517 L 24 50.90557836200662 L 25 50.132351750097776 L 26 49.2374415495204 L 27 49.043624071595495 L 28 49.72909421169213 L 29 50.66363388421297 L 30 50.98803162409286 L 31 50.404037645323065 L 32 49.44857331875831 L 33 49.00008813989273 L 34 49.47091731387997 L 35 50.42818266949615 L 36 50.991778853443115 L 37 50.643538133357 L 38 49.703631421290616 L 39 49.03620461371591 L 40 49.25488683952065 L 41 50.15862266880471 L 42 50.916521547915636 L 43 50.831774742628596 L 44 49.98229807489459 L 45 49.14909647546588 L 46 49.09821165235119 L 47 49.87642687725478 L 48 50.76825466132367 L 49 50.95375265275947 "></path></svg>

这没有显示任何内容。有什么建议吗？

修改我想出来是因为我在加载页面后加载它。这是脚本：

    function f(x) {
        return Math.sin(x);
    }
    $(document).ready(function () {
        var path = "M 0 50 ";
        for (var iii = -50; iii < 50; iii++) {
            var y = 50 - f(iii);
            path += "L " + (iii + 50) + " " + y + " ";
        }
        console.log(path);
        $("<path stroke='red' d='" + path + "' stroke-width='3'/>").appendTo("svg");
    });

如何让SVG重新处理它的内容？

Answer 1

jquery's append not working with svg element?

Add SVG element to existing SVG using DOM

以下是答案。

因此，从所有这些中，我会建议使用此函数将新的SVG元素添加到现有的SVG中。

    function svgAddElement(svgDOM, tag, attributes) { /* svgDOM is a dom SVG element, tag is a string for the new element tag and attributes is an object, containing all atributes */
        var newElement = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attributes)
            newElement.setAttribute(k, attributes[k]);

        svgDOM.appendChild(newElement);
    }

加载页面后加载时svg路径无法正常工作

1 个答案: