Чи є в SVG поняття розміру?


11

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

Відповіді:


15

Ширина та висота доречні лише тоді, коли viewBoxвстановлено. Без цього атрибуту ви можете безпечно видалити ширину та висоту. Він завжди відображатиметься в масштабі, на якому він був намальований. Якщо a <rect>встановлено 10px шириною 20px висотою, він відображатиметься в цій шкалі 10x20 з або без ширини або висоти, коли не встановлено жодний виглядBox.

Якщо встановлено 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.