2012-12-18 1 views
3

JavaScript를 사용하여 svg에 삽입 된 html5 캔버스 (HTML5 페이지)에 그려야합니다. "CVS"에 그리기 이런 식으로하는 경우에 잘 작동합니다 :defs/use의 foreignObject 캔버스가 표시되지 않습니다.

사용 태그에 캔버스으로 수행하고 언급
<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> 
    <foreignObject x="0" y="0" width="512" height="512"> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
     <canvas id="cvs" width="512" height="512"></canvas> 
    </body> 
    </foreignObject> 
</svg> 

아닌 경우. 그림은 단순히 나타나지 않습니다. Safari에서 요소를 검사하면 의 크기가 인 요소는 NaN x NaN이고, Firebug는 0x0을 말합니다.

<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> 
    <defs> 
    <foreignObject id="circles" x="0" y="0" width="512" height="512"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <canvas id="cvs" width="512" height="512"></canvas> 
     </body> 
    </foreignObject> 
    </defs> 
    <use x="0" y="0" xlink:href="#circles"></use> 
</svg> 

이것은 버그입니까? 예상되는 행동? foreignObject (가능성 높음)를 사용하는 방법을 이해하지 못합니까? 당신은 직접 foreignObject 요소를 가리킬 수 없습니다

+0

'사용 x = "0"y = "0"xlink : href = "# 원">' – Duopixel

+0

@Duopixel Argh, 편집 오류. 테스트중인 버전에는 use 태그에 #cvs 대신 #circles가 있습니다. 나는 그것을 수정하기 위해 내 질문을 편집하려고합니다. – BobW

답변

0

, 그것은 말한다 SVG specification

'SVG', '기호', 'g'만 그래픽 요소 또는 다른 '사용'너무. 예를 들어 <foreignObject> 요소가있는 <g> 또는 <svg> 요소를 가리킬 수 있습니다.

+0

나는 당신의 대답을 오해하고 있습니다. 원래 질문에서, 나는 실수로 xcode : href = "# cvs"(foreignObject 자체) 대신 "#circles"(foreignObject의 캔버스 객체)를 타이핑했습니다. 어느 쪽도 작동하지 않습니다. 이제 , 또는 태그의 defs에 내 foreignObject를 래핑 해 보았습니다. 그 태그에 ID를 부여하고 xlink : href = "# groupdefid"또는 무엇이든 부여했습니다. 아직 디스플레이가 없습니다. 다른 작업 방법이 있기 때문에 현재 작업에 큰 문제는 아니지만이 작업을 수행하는 방법을 알고 있으면 좋을 것입니다. – BobW

+0

로버트는 foreignObject를'g' 또는'svg'로 감싸고 그 것을 참조 할 것을 제안합니다. – Duopixel

+0

@Duopixel 우리 의견이 교차 된 것처럼 보입니다. 방금 해봤 어. 불운. – BobW

관련 문제