SVG rect 요소의 배경 이미지를 설정하는 방법은 무엇입니까?

Question

keith-wood의 jQuery SVG 플러그인을 사용하여 SVG rect를 만들었습니다. 여기 코드는 다음과 같습니다

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'ivory', 
         stroke: 'black', 
         strokeWidth : 2}); 

그래서 내가 쉽게 대신 '상아'를 사용하는 채우기를 변경할 수 있다고 생각, 내가 'theImageIwantToUse'로 변경되었습니다. 그러나 그것은 효과가없는 것처럼 보입니다.

Answer 1

당신하여 SVG 이미지를 삽입 할 수 있습니다

<image> 요소 사용 http://www.w3.org/TR/SVG/struct.html#ImageElement

언급 한 플러그인에서 적절한 기능을 사용할 수 있습니다.

svg.image(parent, x, y, width, height, ref, settings) 

(http://keith-wood.name/svg.html)

나는 당신이 원하는 정확한 결과를 얻을 수있는 이미지를 그린 후 채우지 사각형을 그릴해야합니다 있도록 이미지의 스트로크를 사용할 수 의심.

Answer 2

외부 이미지를 SVG 객체의 배경으로 직접 삽입 할 수 없습니다.

대신, 먼저이

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
         {patternUnits: "userSpaceOnUse"}); 
svg.image(ptn, 100, 50, 200, 200, "./theImageIwantToUse.png"); 

같은 PATTTERN을 만들어야 및 채우기 속성에 url() 기능을 통해 다음이 패턴을 사용

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'url(#imgPattern)', 
         stroke: 'black', 
         strokeWidth : 2});