¿Cómo establecer una imagen de fondo del elemento SVG rect?

Question

Creé un SVG rect usando el plugin jQuery SVG de keith-wood. Aquí está el código:

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

así que pensé que podría fácilmente cambiar el relleno en lugar de utilizar 'marfil', lo cambié a 'theImageIwantToUse'. pero no parece funcionar.

Answer 1

Puede insertar imágenes en su SVG por utilizando el elemento <image>http://www.w3.org/TR/SVG/struct.html#ImageElement

Hay una función adecuada disponible en el complemento mencionado.

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

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

Dudo que sea posible utilizar accidente cerebrovascular en una imagen de modo que tendrá que dibujar un rectángulo sin relleno después de dibujar la imagen para obtener el resultado exacto que desea.

Answer 2

No se puede insertar una imagen externa directamente como fondo de los objetos SVG.

En su lugar, primero hay que crear un Patttern como esto

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"); 

y utilizar este patrón de continuación, a través de la función url() en el atributo de relleno

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