Quiero llenar un espacio rectangular con un patrón de imagen repetitivo. Las imágenes están dispuestas en un mosaico cuadrado escalonado. Dos filas adyacentes están escalonadas en la dirección x por la mitad del ancho del lado del cuadrado.
¿Cómo usar el elemento patrón en svg para lograr esto?
Aquí está el diagrama del resultado que quiero.
Traté de lograr este cambio pero no funcionó.
<svg width=1000 height=1000> <pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)"> <rect class="checker" x="0" width="100" height="100" y="0" fill="blue" /> <rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" /> <rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" /> <rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" /> </pattern> <rect width="100%" height="100%" fill=url(#bar)> </svg>La dificultad es que cada uno de mis cuadrados es una imagen y no se puede dividir por la mitad. Así que no puedo encontrar el elemento más pequeño de este patrón.
Gracias de antemano.
Algo como esto... Puedes reemplazar las rutas con imágenes.
El truco consiste en dibujar una de las piezas en dos mitades separadas, permitiendo que el patrón rectifique cada mitad.
<svg> <pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80"> <path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/> <path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/> <path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/> <path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/> <path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/> </pattern> <rect width="200" height="200" fill="url(#p)"/> </svg>