Raphaeljs로 패턴을 만드는 방법은 무엇입니까?

Question

내 셰이프에 눈금 패턴을 추가하려고하는데 거기에 누락 된 것이 있습니까? 이것은 내가 추가 한 방법입니다

** Fiddle **

var paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%'); 
$('<pattern id="mygrid" width="10" height="10" patternUnits="userSpaceOnUse">\ 
    <polygon points="5,0 10,10 0,10" stroke="black" />\ 
    </pattern>').appendTo('svg defs'); 

var circle = paper.circle(60, 60, 50); 
circle.attr("fill","url(#mygrid)"); 

내가
이 패턴이 추가 된 후 HTML 인 패턴을 추가하기 전에 문서가로드 아마 때문에 생각 (원이 아닙니다 있는 채우기) :

<div id=canvas_container> 
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"> 
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc> 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
     <pattern id="mygrid" width="10" height="10" patternunits="userSpaceOnUse"> 
     <polygon points="5,0 10,10 0,10" stroke="black"></polygon> 
     </pattern> 
     <pattern id="6A35489A-D006-4344-B2A5-C3899E2C21F4" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(9.925405384842906,10)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
     <image x="0" y="0" xlink:href="#mygrid" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image> 
     </pattern> 
    </defs> 
    <circle cx="60" cy="60" r="50" fill="url(#6A35489A-D006-4344-B2A5-C3899E2C21F4)" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle> 
</svg> 
</div> 

Answer 1

는 XHTML 네임 스페이스와 함께 올바른 방향으로
요소 날 가리키는 주셔서 Robert 감사는의를 추가 할 수 없습니다 ,

이

var dummy = $('<svg style="display:none"><defs>\ 
    <pattern id="mygrid" width="30" height="30" patternUnits="userSpaceOnUse">\ 
    <polygon points="15,0 30,30 0,30" stroke="black" />\ 
    </pattern></defs></svg>').appendTo('body'); 
$(paper.canvas).append(dummy.find("#mygrid")); //paper.canvas is the svg node 
dummy.remove(); 

"전체 SVG 문서가 추가 된 경우 : AME 방법 다른 요소
로 (나는 완전히 내 패턴으로 다른 SVG를 만들어야했습니다 다음 복사)
이 내가이 일을 만든 방법입니다 브라우저는 SVG 문서의 모든 요소의 네임 스페이스 변환을 자동으로 처리합니다. "

나 :

var pattern = '<pattern id="mygrid" width="30" height="30" patternUnits="userSpaceOnUse">\ 
    <polygon points="15,0 30,30 0,30" stroke="black" />\ 
    </pattern>'; 
pattern = $.parseHTML('<svg>'+pattern+'</svg>')[0].firstChild; //or childNodes 
$('svg defs').append(pattern);