Есть ли какая-то концепция размера в SVG?


11

Мне было интересно, о файлах SVG. Я знаю, что это набор векторов, определяемых путевыми тегами в XML, поэтому почему он имеет ширину и высоту в пикселях в теге svg и что если мы удалим эти измерения?

Ответы:


15

Ширина и высота имеют значение только при viewBoxустановке. Без этого атрибута вы можете безопасно удалить ширину и высоту. Он всегда будет отображаться в масштабе, в котором он был нарисован. Если a <rect>был установлен шириной 10px и высотой 20px, он будет отображаться в этом масштабе 10x20 с шириной или высотой или без нее, когда viewBox не установлен.

Если viewBoxатрибут установлен, вы можете использовать ширину и высоту, чтобы отрегулировать исходный масштаб вверх или вниз.

Без ширины и высоты, но с установленным viewBox, это позволит svg масштабироваться бесконечно, что может быть или не быть желаемым поведением. На адаптивной HTML-странице это часто желательно. Он будет увеличиваться или уменьшаться, чтобы соответствовать ограничивающему контейнеру.

Это одно и то же

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

Это удваивает исходный масштаб.

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

Это позволяет бесконечное масштабирование

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.