¿Puede un objeto SVG tener un color de relleno y un patrón de relleno?

Question

Estoy trabajando con SVG usando la biblioteca Raphael. Puedo aplicar un color de relleno a un objeto de este modo:

circle.attr({fill: "#ff0000"}); 

Y esto también funciona (aunque la documentación Rafael no lo menciona):

circle.attr({fill: "url(pattern.png)"}); 

Soy capaz de utilizar PNG transparentes como rellenar patrones, y la transparencia funciona como se espera. El objeto svg es completamente transparente donde la imagen del patrón de relleno es transparente. Pero lo que me gustaría hacer es especificar tanto una imagen de patrón de relleno como un color de relleno, para que el color se muestre donde la imagen de patrón es transparente, similar a la propiedad de "fondo" usando CSS, por ejemplo. ¿Es esto posible con SVG?

Answer 1

Puede definir un patrón que tenga un rect con un relleno, y una imagen que sea su png encima de ese rect. Luego use el patrón como relleno para el círculo (o cualquier elemento que desee).

Esto significa salir de Raphaël o extenderlo para hacer lo que desee. Tenga en cuenta que lo que hace ({fill: "url(pattern.png)"}) es crear un elemento de patrón y añadir un elemento de imagen apuntando a la url determinada. Es muy posible hackear Raphaël para permitirle pasar un color también, y luego tratar con eso en el código que crea el patrón creando un rect de las mismas dimensiones que la imagen con el color de relleno dado.

Debo decir que si quieres que funcione con IE < 9 entonces probablemente también necesites implementarlo en VML.

Otras opciones incluyen dibujar dos formas, una con relleno de color y la otra con el relleno de imagen de trama. Otra más es hacer que el png incluya el color de fondo para que no sea transparente.