배경 이미지로 설정된 .svg 파일을 동적으로 편집합니다.

Question

div의 배경에 svg 이미지를 추가했습니다.

 div#cover{ 
      background-image:url('dwm.svg'); 
     } 

내가 동적 등 채우기, 뇌졸중, 등이 SVG의 특정 부분을 편집 할 수있는 방법이 있는지 알고 싶습니다

Answer 1

DOM의 일부로 svg를 사용하고 수정 한 다음 DOM에서 가져온 수정 된 svg의 데이터 URI로 배경을 설정할 수 있습니다. 이 종류의 해키 될 수도 있지만
그것은 http://jsfiddle.net/zSRW5/

당신은 당신이 항상 그걸 얻기 위해 아약스를 사용할 수있는 SVG를 포함하지 않으려면

<div id="bg"></div> 
<div id="svg">[svg data]</div> 

$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')'); 
$('button').click(function(){ 
    $('#fill').attr('fill', '#ff00ff'); 
    $('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')'); 
}); 

작동합니다.

Answer 2

아니, 당신이 포함하면 그렇게에만 수 있다고 생각 페이지 내의 SVG를 참조하고이를 참조하면 브라우저 버그로 인해 배경 값을 다른 것으로 변경하고 다시 참조로 되돌려 야합니다.