Presta atención ya que en este artículo hallarás el hallazgo que buscas.
Solución:
Cultivo
Puede recortar la imagen utilizando márgenes negativos y fijando el tamaño del elemento principal:
CSS Mostrar una imagen redimensionada y recortada
¡PERO ESTO ES UN SVG!
No solo puede mostrar un svg directamente en html:
pero para recortar/cambiar el tamaño, simplemente puede modificar el viewBox attribute sobre el
viewBox="0 0 100 100"
mostrará cualquier cosa dentro de 0 y 100 unidades x & y
viewBox="-100 -100 100 100"
Mostrará cualquier cosa desde -100 a 100 unidades x & y
viewBox="50 50 500 500"
Mostrará cualquier cosa desde 50 a 500 unidades x & y
Ninguna de estas respuestas (y múltiples similares/duplicados) pareció responder completamente a esto y proporcionar un ejemplo.
Paso a paso: elimine el “relleno” (espacio en blanco circundante) directamente dentro del código SVG
-
Determine el tamaño “real” de su svg sin relleno. Para mí, esto fue más fácil de hacer usando el inspector (Chrome) y pasando el cursor sobre el sendero elemento dentro del inspector. Verá el ancho y la altura junto al svg real en su navegador.
- Si hay varios elementos de ruta, descubrí que el último suele ser el elemento “contenedor”.
-
Ahora edite el código svg directamente en el editor de texto/código de su elección. Solo cambiará el código dentro de la etiqueta del elemento svg.
- Cambiar el ancho y la altura attributes a las dimensiones “reales” que determinó en el paso #1.
- Cambiar las 4 dimensiones del viewBox attribute. Sin embargo, no hay unidades, solo los números (es decir, 10 no 10px).
- Comenzaremos con los números 3 y 4, que nuevamente serán su ancho y alto “reales”.
- Las dimensiones 1 y 2 son las coordenadas x e y para el “origen” de la parte del svg que está dentro de viewBox. Estos se cambiarán respectivamente (de lo que probablemente era 0 0) a: medio de la diferencia entre el ancho y la altura iniciales y el ancho y la altura reales. En términos más simples (CSS), su margen izquierdo y su margen superior.
¿Confundido? Ejemplo simple paso a paso
Este ejemplo lo hará extremadamente simple y usará el svg directamente debajo como referencia. Si desea recorrer este ejemplo exacto, simplemente envuelva todo el código a continuación en etiquetas HTML svg code y abre en tu navegador.
+ Asumiremos que ha podido completar el paso n.º 1 y determinar las dimensiones “reales” de su svg sin relleno. Para este ejemplo, las dimensiones reales son 40 x 40. Cambie el svg attributes para reflejar esto.
width="40" height="40"
+ Nuestras dimensiones iniciales eran 48 x 48 y nuestras dimensiones reales (sin relleno) son 40 x 40. La mitad de esta diferencia es 4 x 4. Cambie el viewBox attribute en consecuencia, y agregue nuestro ancho y alto reales.
viewBox="4 4 40 40"
+ Nuestra etiqueta svg de apertura ahora debería reflejar estos cambios.
+ Si el relleno alrededor de su svg tiene diferentes cantidades para la parte superior/inferior y derecha/izquierda, esto no es un problema. Simplemente siga las instrucciones estándar anteriores, luego juegue con los primeros 2 valores de la propiedad viewBox para comprender cómo esos valores desplazan la imagen a lo largo de los ejes x e y.
Acabo de aprender todo esto esta noche mientras lidiaba con el mismo problema. Completamente abierto a sugerencias / ediciones de cualquier persona con más conocimientos sobre la manipulación de gráficos vectoriales escalables que yo.
Puede hacer exactamente lo que quiera con los identificadores de fragmentos. Los identificadores de fragmentos le permiten definir el segmento de un SVG que desea mostrar en una etiqueta img, además de permitir el control de las transformaciones de imagen y la relación de aspecto.
agregando #svgView(viewBox(0, 0, 32, 32)) al final de su url svg define el área en el svg que desea mostrar. Los primeros 2 parámetros son las coordenadas x e y de la esquina superior izquierda de su cuadro de visualización y los segundos 2 parámetros son el ancho y el alto de su cuadro de visualización.
Usando esta técnica, sus etiquetas img se verán así:
))
Es importante asegurarse de que la relación de aspecto del cuadro de visualización coincida con la relación de aspecto de la etiqueta img, de lo contrario, su cuadro de visualización no tendrá el tamaño/alineación correctos. Si necesita un mayor control de la relación de aspecto, siempre puede usar el identificador de fragmento preserveAspectRatioSpec.
Para encontrar el viewBox para la imagen completa, visite la URL de svg directamente e inspeccione los elementos de la página para encontrar el viewBox definido en el elemento svg más externo.
Armado con esa información, ahora puede adaptar su viewbox a sus necesidades.
Ejemplo de CodePen aquí