thêm đối tượng động bên ngoài vào svg bằng cách sử dụng javascript

Khi tôi chạy mã này, nó hiển thị cho tôi màn hình trống nhưng khi tôi cập nhật mã bằng công cụ nhà phát triển trong chrome thì nó sẽ hiển thị dữ liệu. Vui lòng giúp giải thích lý do tại sao nó hiển thị khi tôi cập nhật mã bằng công cụ nhà phát triển của chrome, Có phải do DOM tại trình duyệt chạy lại hay không, nếu có thì tại sao không ở lần đầu tiên nó hiển thị. Điều này có xảy ra do ngoại lệ không.thêm đối tượng động bên ngoài vào svg bằng cách sử dụng javascript

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 
     <text x="10" y="10">hello</text> 
    </g> 
    </svg> 
     <script> 
      var s = document.getElementById('t'); 
      var g = s.childNodes[1]; 
      console.log(g.childNodes[1].remove()); 
      var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 

      foreign.setAttribute('width', 500); 
      foreign.setAttribute('height', 150); 
      var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
      txt.setAttribute('x', '10'); 
      txt.setAttribute('y', '10'); 
      var t = document.createTextNode("This is a paragraph."); 
      txt.appendChild(t); 
      foreign.appendChild(txt); 
      g.appendChild(foreign); 

</script>   
</body> 
</html>

Nguồn

2015-07-05 Pranjal

@JabranSaeed, Robert longson là kinh điển. – Kaiido

Nút văn bản svg không thể là con của nút ForeignObject, bạn cần nút svg trong đường. Ví dụ.

 var s = document.getElementById('t'); 
 
     var g = s.childNodes[1]; 
 
     console.log(g.childNodes[1].remove()); 
 
     var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 
 

 
     foreign.setAttribute('width', 500); 
 
     foreign.setAttribute('height', 150); 
 
     var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
 
     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
 
     txt.setAttribute('x', '10'); 
 
     txt.setAttribute('y', '30'); 
 
     var t = document.createTextNode("This is a paragraph."); 
 
     txt.appendChild(t); 
 
     foreign.appendChild(svg); 
 
     svg.appendChild(txt); 
 
     g.appendChild(foreign);

<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
    <svg id="t"> 
 
    <g> 
 
     <text x="10" y="30">hello</text> 
 
    </g> 
 
    </svg> 
 
</body> 
 
</html>

Có nói rằng, tôi không thấy lý do tại sao bạn muốn sử dụng foreignObject trừ khi bạn đang đi để tạo ra một số nút không svg.

Một thứ khác mà mọi người đi lên là tạo ra các phần tử trong không gian tên chính xác. Các yếu tố SVG cần phải đi trong không gian tên SVG (http://www.w3.org/2000/svg).

Có thể chạy lại nó buộc Chrome phải tự tạo nút chính svg hoặc có lẽ đó chỉ là lỗi Chrome.

Nguồn

2015-07-05 15:49:07

Tôi đang đối mặt với cùng một vấn đề. externalObject bị ẩn trừ khi được chỉnh sửa cụ thể (dưới dạng HTML) từ các công cụ phát triển chrome/firefox. Có vẻ như nó đòi hỏi phải làm mới một số loại. –

@JabranSaeed Câu trả lời của tôi hoạt động trên Firefox và Chrome. –

@JabranSaeed if you want to use foroeignObject to insert non svg element then: 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 

    </g> 
    </svg> 
<script> 
    var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 

     var foreign = document.createElementNS 

('http://www.w3.org/2000/svg',"foreignObject"); 

     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height',500); 
     var iDiv = document.createElement('div'); 
     var t = document.createTextNode("This is a paragraph."); 
     iDiv.appendChild(t); 
     foreign.appendChild(iDiv); 

     g.appendChild(foreign); 
</script> 
</body> 
</html>

Nguồn

2015-08-30 09:52:08 Pranjal

Thực tế phần con phụ thêm của bạn đang tạo ra probelm.

bạn đã không thêm nó theo đúng thứ tự.

Kiểm tra mã dưới đây và đưa ra một thử

 var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 
     g.childNodes[1].remove(); 
     var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject"); 
     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height', 150); 
     var t = document.createTextNode("This is a paragraph."); 
     foreign.appendChild(t); 
     g.appendChild(foreign);

cho tôi biết nếu nó được làm việc

Nguồn

2015-09-03 05:12:34

@JabranSaeed if you want to use foroeignObject,beter to follow this method 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
    <svg id="t"> 
    <g> 

    </g> 
    </svg> 
<script> 
    var s = document.getElementById('t'); 
     var g = s.childNodes[1]; 

     var foreign = document.createElementNS 

('http://www.w3.org/2000/svg',"foreignObject"); 

     foreign.setAttribute('width', 500); 
     foreign.setAttribute('height',500); 
     var iDivele = document.createElement('div'); 
     var ob = document.createTextNode("xxxx"); 
     iDiv.appendChild(ov); 
     foreign.appendChild(iDivele); 

     g.appendChild(foreign); 
</script> 
</body> 
</html>

Nguồn

2015-09-03 06:36:11

thêm đối tượng động bên ngoài vào svg bằng cách sử dụng javascript

Trả lời

Các vấn đề liên quan