當頁面加載後加載svg路徑不工作

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

這不顯示任何內容。有什麼建議麼？當頁面加載後加載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重新處理它的內容？

來源

2015-08-14 Luka Govedič

是的。但是，您忘記了'viewBox'屬性。 –

座標是負數，這意味着如果沒有viewBox，它們就不在屏幕上。 –

它在開始時放在頁面上時正在工作 –

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); 
    }

來源

2015-08-14 19:01:56

當頁面加載後加載svg路徑不工作

回答

相關問題