jquery 만든 svg rect 나타나지 않습니다

jQuery 및 기타 라이브러리를 사용하여 SVG 막대 그래프를 만들려고하지만 사각형을 만들 때 html로 입력 한 동일한 것들은 있지만 그들은 브라우저에서 나타나지 않습니다. 나타나다.jquery 만든 svg rect 나타나지 않습니다

var data = [4, 8, 15, 16, 23, 42]; 
var chart = jQuery("#chart"); 
jQuery.each(data, function(index, value) { 
    var bar = jQuery("<rect/>"); 
    chart.append(bar); 
    bar.attr("y", index * 20) 
     .attr("width", value * 10) 
     .attr("height", 20); 
});

과 HTML :

<svg id="chart" class="chart" width=420 height=120 style="display: block;"> 
    <rect y="0" width="40" height="20"></rect> <!--added to test--> 
</svg>

에 입력 한 RECT 태그가 잘 나타나고 크롬 개발자 도구를 사용하여 내 코드 만 원 코드를 생성 한 사람에 의해 생성 된 첫 번째와 동일 나타납니다 나타나지 마.

jQuery.each(data, function(index, value) { 
    ... 
}  
chart.html(function(){return this.innerHTML});

SEE jsFiddle

출처

2012-12-05 user1301877

내 답변이 도움이 되었습니까? – Magicmarkker

내 jQuery 해킹을 시도해 볼 수 있습니다. http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470#14985470 –

생성 된 사각형이 표시되지 않는 이유를 찾았습니까? ? 나는 js가 생성 된 직사각형과 동일한 문제점을 보이고있다.하지만 요소 뷰어에서 똑같이 보이기는 커녕 직사각형의 손으로 직접 작성한 요소가 나타난다. – drdozer

시도는 요소를 새로 고치려면 제대로 작동하는지 확인하십시오. 건배!

출처

2012-12-05 21:06:58

$(document).ready(function() { 
    var data = [4, 8, 15, 16, 23, 42]; 
    var chart = jQuery("#chart2"); 
    jQuery.each(data, function(index, value) { 
     var bar = $(document.createElementNS("http://www.w3.org/2000/svg", "rect")).attr({ 
      x: 0, 
      y: index * 20, 
      width: value * 10, 
      height: 20, 
      stroke: "red", 
      fill: "white" 
     }); 
     chart.append(bar); 
    }); 
});

http://jsfiddle.net/26ybf/

편집 : 분명히 당신은 스트로크를 제거하고 속성을 채울 수, 난 그냥했다 거기에 만들

출처

2012-12-05 21:08:27 Magicmarkker

예! 나는 의심 스럽지만 명백히 jQuery는 "실제로"요소를 만들기 위해 document.createElementNS를 사용하지 않고 잘못된 요소 유형을 만든다. – Loren

jquery 만든 svg rect 나타나지 않습니다

답변

관련 문제