atributo svg viewBox

Estoy aprendiendo svg de sus documentos oficiales, hay tal línea. No lo entiendo, si ya tiene un atributo de width y height , ¿qué sentido tiene volver a especificarlo en viewBox="0 0 1500 1000" ? Se dice: “Una unidad de px se define para ser igual a una unidad de usuario. Por lo tanto, una longitud de” 5px “es igual a una longitud de” 5 “” en los documentos oficiales, por lo que esta viewBox es una de 1500px de ancho y 1000 vistas en altura, que supera 300px y 200px. Entonces, ¿por qué define el valor de ancho y alto en primer lugar?

   

El ancho y la altura son lo grande que es . El viewBox controla cómo se muestran sus contenidos, por lo que viewBox = “0 0 1500 1000” reducirá el contenido del elemento por un factor de 5 (1500/300 = 5 y 1000/200 = 5) y el contenido ser 1/5 del tamaño que serían sin viewBox, pero el

Imagine que tiene una superficie elástica y córtela en 4 piezas iguales. Si arrojas 3 piezas, tienes una superficie que es 1/4 del tamaño de la superficie original. Si ahora estira la superficie y la hace del mismo tamaño que la superficie original, entonces todo en la superficie tendrá el doble de tamaño. Así es como viewBox y ancho / alto están relacionados.

Si no especifica una vista, se supone que todos los números sin unidades en un elemento son píxeles. (y SVG supone 90 ppp o píxeles por pulgada para la conversión de unidades como cm a píxeles).

Un cuadro de vista le permite hacer que los números sin unidades en los elementos signifiquen “unidades de usuario” y especifica cómo se asignan esas unidades al tamaño. Para simplificar, considere solo las coordenadas x, es decir, una regla. Tu viewbox dice que tu regla tendrá 1500 unidades para que coincida con el ancho de 200 píxeles del svg.

Un elemento de línea de 0 a 1500 (sin unidad, es decir, unidades de usuario) se extendería 200 píxeles como dibujados, es decir, a lo largo del ancho del dibujo svg.

(Y como SVG es escalable sin pérdida de resolución, los píxeles realmente no significan mucho en el mundo real, cuando un usuario amplía o aleja).

Es una transformación de coordenadas, de tipo.

Le sugiero que aprenda de un libro como “SVG Essentials”, aproximadamente $ 10 usados, de lo cual cito textualmente esta respuesta.

Por defecto

  

la “regla” de svg grid está en pixel (todas las formas en esa svg se miden en pixel)

Pero si desea usar sus propias unidades, puede usar viewtrox attr para eso:

  

Eso significa:

eje horizontal: 1500 (su unidad de ancho) = 300px => 1 (su unidad de ancho) = 300 / 1500px = 1 / 5px

eje vertical: 1000 (su unidad de altura) = 200px => 1 (su unidad de altura) = 200 / 1000px = 1 / 5px

  • Ahora todas las formas en el svg se escalarán:

sus anchos se escalan a 1 / 5px (1/5 <1 => reducción de escala) en comparación con el origen.

sus alturas también aumentan a 1 / 5px (1/5 <1 => reducción de escala) en comparación con el origen