động chèn foreignObject vào svg với jquery

<div id="svg" style="width: 300px; height: 300px"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> 
     <svg x='10' y='10' id='group'> 
      <rect id="rect" x='0' y='0' width='100' height='100' fill='#f0f0f0'/> 
     </svg> 
     <svg x='100' y='100' id='group2'> 
      <rect id="rect2" x='0' y='0' width='100' height='100' fill='#f00000'/> 
      <foreignobject x='0' y='0' width='100' height='100' > 
       <body> 
        <div>manual</div> 
       </body> 
      </foreignobject> 
     </svg> 
    </svg> 
</div>

Tôi muốn chèn một foreignObject vào #group (tốt nhất với jquery cho nó làm thao tác đơn giản hơn). Tôi đã thử (mã được phác thảo từ đầu)

$("#group").append("<foreignobject x='0' y='0' width='100' height='100'><body><div>auto</div></body></foreignobject>")

không có kết quả có thể vì "cơ thể" bị tước. Tôi đã thử một số cách kỳ lạ của việc tạo ra các yếu tố cơ thể và tốt nhất tôi có thể - firebug không màu xám ra các phần tử externalObject chèn nữa nhưng nó vẫn không nhìn thấy được.

Vì vậy, tôi không thấy điều gì rõ ràng hoặc có cách lạ để làm điều đó.

Ý tưởng?

Cập nhật với giải pháp cuối cùng Đây là ngắn nhất về những gì tôi đã đưa ra

var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); 
var body = document.createElement('body'); // you cannot create bodies with .apend("<body />") for some reason 
$(foreignObject).attr("x", 0).attr("y", 0).attr("width", 100).attr("height", 100).append(body); 
$(body).append("<div>real auto</div>"); 
$("#group").append(foreignObject);

Nguồn

2012-09-17 durilka

SVG là trường hợp nhạy cảm và tên nguyên tố bạn muốn được gọi là foreignObject. Để tạo ra nó bằng cách sử dụng dom bạn sẽ gọi

document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')

Nguồn

2012-09-17 15:28:24

cả thẻ firefox và chrome cho phép các thẻ svg không nhạy cảm - ít nhất mã ở trên cho thấy đối tượng nước ngoài được xác định thủ công – durilka

-1

jQuery là không phù hợp cho các tài liệu SVG.

Nhưng bạn vẫn có thể sử dụng JS đồng bằng trong mối liên hệ với jQuery:

var foreignObject = document.createElement('foreignobject'); 

/* add further child elements and attributes to foreignObject */ 

document.getElementById('group').appendChild(foreignObject);

Nguồn

2012-09-17 15:09:08 feeela

này mảnh khá dài dòng mã vẫn hiển thị gì 'var foreignObject = document.createElement ('http://www.w3.org/2000/svg', 'foreignObject'); foreignObject.setAttribute ("x", "0"); foreignObject.setAttribute ("y", "0"); foreignObject.setAttribute ("chiều rộng", "100"); foreignObject.setAttribute ("height", "100"); var body = document.createElement ('body'); var div = document.createElement ('div'); var text = document.createTextNode ("tự động"); div.appendChild (văn bản); body.appendChild (div); foreignObject.appendChild (body); document.getElementById ('group') .appendChild (externalObject); ' – durilka

document.createElement phải là document.createElementNS –

document.CreateElementNS yêu cầu hai đối số, không chỉ phần tử bạn muốn tạo mà còn 'http: // www. w3.org/2000/svg ' –

động chèn foreignObject vào svg với jquery

Trả lời

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