que tiene la siguiente imagen en mi archivo .svg:Centrar imagen con SVG
<image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71"/>
lo quiero mostrar en el centro de la página, pero parece que la esquina superior izquierda está en el medio. ¿Cómo puedo hacer que el centro de la imagen se muestre en el centro de la página?
Algo como esto debería funcionar:
<image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71" transform="translate(-35.5,-31)"/>
Ésta es una forma ...
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="50%" y="50%" width="258px" height="221px" overflow="visible">
<image x="-129px" y="-110.5px" width="258px" height="221px" xlink:href="http://images2.wikia.nocookie.net/__cb20110303182948/hogwartsrpg/images/9/95/KittenCareCat.png"/>
</svg>
</svg>
Gracias. Eso es mucho trabajo, pero funciona. Voy a dejar esto abierto por un tiempo y ver si alguien puede encontrar algo más fácil, pero si no, es tuyo. – SomeKittens
Este patrón funciona bien cuando tiene objetos anidados y puntos de pivote. ¡Gracias por eso! –
Esto es genio, muchas gracias por compartir. Me salvó cuando traté de cambiar los círculos de colores a mapas de bits circulares en un diseño fluido. – mmmeff
esto no funciona si 'height' o' width' no son pixels – depperm
@depperm true, hasta que la transformación admite unidades (cosa que ya hace en css) –