Llenar elemento SVG con una imagen de fondo con un desplazamiento

Question

que quiero hacer algo similar a esto Fill SVG path element with a background-image

Sin embargo, quiero cambiar/desplazamiento de la imagen. Con CSS, puede hacerlo fácilmente configurando background-image y background-position. ¿Cómo lo hago con SVG?

Answer 1

Puede usar patternTransform en el elemento de patrón para transformar el patrón; funciona igual que el atributo transform con el que ya puede estar familiarizado. Ver the documentation para más detalles.

Answer 2

Puede usar un pattern y un elemento SVG con el atributo fill.

Aquí hay un ejemplo: inserte una imagen en la posición (10, 10) con un desplazamiento (40, 550) y un tamaño (420, 340). Tenga en cuenta que debe establecer el x/y y el transform="translate(-x1 -y2)" correctos.

<p> 
 
    <a href="http://i.imgur.com/09AoLQtr.jpg">Original image</a> 
 
</p> 
 

 
<svg version="1.1" width="500" height="400" style="background-color: #EEE;"> 
 
    <defs> 
 
<pattern id="europe" patternUnits="userSpaceOnUse" 
 
     width="1456px" height="1094px"> 
 
    <image xlink:href="http://i.imgur.com/09AoLQtr.jpg"/> 
 
</pattern> 
 
    </defs> 
 

 
    <rect fill="url(#europe)" transform="translate(-30 -540)" 
 
    x="40" y="550" width="420" height="340"/> 
 
</svg>