2013-03-05 6 views
12

확장명이 '.svg'인 svg 이미지를 내 차트 (d3로 만든 다른 svg 이미지)에 추가하려고합니다. d3 확장자가 svg 인 이미지 추가

코드입니다 :

d3.select("#chart1 svg") 
    .append("svg:image") 
    .attr("xlink:href", "img/icons/sun.svg") 
    .attr("width", 40) 
    .attr("height", 40) 
    .attr("x", 228) 
    .attr("y",53); 

당신은 내가 설정 "인 XLink : href가"야 볼 수있는 속성,하지만 D3 변경이 브라우저에서 HREF하기 : 사실

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image> 

,이 코드는 png 확장을 사용하면 완벽하게 작동합니다. 어떤 생각?

+1

그 문제도 있습니다. 외관상으로는, D3는 접두어가 알려진 네임 스페이스 인 경우 접두사를 제거합니다. 여기에 네임 스페이스에 대한 더 자세한 내용이 있습니다 : https://github.com/mbostock/d3/wiki/Namespaces –

+1

속성이'setAttributeNS'와 함께 추가되는 한, 모든 브라우저에서 잘 작동합니다.). 속성 자체의 누락 된 접두사는 문서/요소 직렬화를 특정 방식으로 수행하려는 경우에만 문제가됩니다. –

+0

오늘은 여전히 ​​오늘처럼 보입니다 ... 지금까지 해결책을 찾은 사람이 있습니까? –

답변

14

로 작동해야하는 코드는 - 여기 당신이 D3에 .svg 파일을 첨부의 예를 볼 수 있습니다

http://jsfiddle.net/am8ZB/

이 사진이 있지만, 실제로는 그냥 가능 잊지 마세요 그것을 볼 수 없습니다. 브라우저 개발자 도구를 사용하여 페이지를 검사하여 그림이보기 영역 밖으로 배치되었는지 확인하십시오 (예 : x/y 값으로 인해).

#chart1에 대한 자세한 정보는이 경우 도움이됩니다.