Zastanawiałem się nad plikami SVG. Wiem, że jest to zbiór wektorów zdefiniowanych przez znaczniki ścieżki w XML, więc dlaczego ma szerokość i wysokość w pikselach w znaczniku svg, a co jeśli usuniemy te wymiary?
Zastanawiałem się nad plikami SVG. Wiem, że jest to zbiór wektorów zdefiniowanych przez znaczniki ścieżki w XML, więc dlaczego ma szerokość i wysokość w pikselach w znaczniku svg, a co jeśli usuniemy te wymiary?
Odpowiedzi:
Szerokość i wysokość mają znaczenie tylko wtedy, gdy viewBoxjest ustawiona. Bez tego atrybutu można bezpiecznie usunąć szerokość i wysokość. Zawsze będzie wyświetlany w skali, w której został narysowany. Jeśli <rect>ustawiono a 10px wide 20px high, wyświetli się przy tej skali 10x20 z lub bez szerokości lub wysokości, gdy nie jest ustawiony viewBox.
Jeśli viewBoxustawiony jest atrybut, możesz użyć szerokości i wysokości, aby dostosować oryginalną skalę w górę lub w dół.
Bez szerokości i wysokości, ale ustawionego viewBox, svg umożliwi skalowanie w nieskończoność, co może, ale nie musi być pożądanym zachowaniem. Na responsywnej stronie HTML jest to często pożądane. Skaluje się w górę lub w dół, aby dopasować ograniczający pojemnik.
Te są takie same
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">Podwaja to oryginalną skalę.
<svg viewBox="0 0 120 120" width="240" height="240"
xmlns="http://www.w3.org/2000/svg">Umożliwia to nieskończone skalowanie
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">