svg 데이터에 <use>을 사용할 때 강제로 다시 그리기

Question

디스플레이 아래에 dom에 저장된 svg 데이터 (ajax로 업데이트 됨)를로드하는 요소를 사용하여 표시되는 svg 요소 (#svg_wrapper)가 있습니다. none div parent (#svg_loader). 숨겨진 div에 업데이트 된 svg 마크 업을로드 한 후 요소에서 사용하는 svg 데이터의 다시 그리기를 강제로 수행 할 수 있습니까?

내 컨테이너의 크기 (#timeline_wrapper)로로드 된 svg를 확장 할 수있는 유일한 방법이기 때문에 사용법은 필연적입니다.

업데이트 된 svg 노드를 #svg_loader에 성공적으로 추가 할 수 있었지만 브라우저가 변경 사항을 다시 렌더링하지 않았습니다. DOM에 방금로드 된 변경된 SVG를 다시 그리도록 강요 할 수 있습니까?

<div id='svg_loader' style='display:none;'> 
<svg id='svg_timeline'> ajax-updated svg data</svg> 
</div> 
<div id='timeline_wrapper' style='width:725px;margin-left:auto;margin-right:auto;text-align:center;'> 
<svg id='svg_wrapper' style='width:725px;height:352px;' xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' > 
<defs id='defs3006'> 
<marker orient='auto' refY='0.0' refX='-3' id='Arrow2Mend' style='overflow:visible;'> 
    <path id='path3900' style='fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;' d='M -15 -5 L 0 0 L -15 5 z' transform='scale(0.5)'/> 
</marker> 
</defs> 
<use xlink:href='#svg_timeline' x='0' y='-35' width='100%' height='100%' /> 
</svg> 
</div> 

고맙습니다!

Answer 1

방법에 대한 세척 새로운 데이터를 다시 연결 당신의 숨겨진 사업부의 innerHTML 및 를?

으로 간단하게 : 보조 노트로

var hiddenDiv = document.getElementById('yourHiddenDiv'); 
hiddenDiv.innerHTML = ''; 
hiddenDiv.innerHTML = svgData; //where svgData is your new svg string 

:

가 다시 그릴 수있는 SVG 해야 힘의 내부 데이터를 변경하면, 당신은 또한을 변경하지 않는 시도 할 수 있지만 SVG의 데이터

전체 SVG 문자열을 새로운 것으로 대체 할 수 있습니다. AJAX 호출을 통해 <svg> 태그를 사용하여 전체 SVG 문자열 데이터를 가져 오지 않으면 전체 SVG 형식으로 자신 만의 문자열을 간단히 만들 수 있습니다. 그냥 을 내에서 AJAX 데이터를 연결 한 다음 위에서 설명한대로 innerHTML=yourFullSvgString에 연결하십시오.