Skalowanie obrazka svg do podanych wymiarów

Skalowanie obrazka svg do podanych wymiarów
ZW
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 53
0

Cześć, mam taki problem ze skalowaniem obrazka svg w elemencie div. Mam dużo różnych obrazków svg i chciałbym zrobić tak, żeby każdy z nich zmieścił się w diwie o podanych wymiarach i oczywiście nie był ani za mały ani za duży. Mam tutaj dwa przykłady na jsfiddle:
https://jsfiddle.net/acrjc37s/1/
https://jsfiddle.net/ojear288/

I teraz chciałbym jakby znaleźć tak ialgorytm albo zasadę jak wyskalować taki każdy obrazek, aby zmieścił się w tym divie i nie był ani za mały ani za duży czytałem trochę o vievBox, atrybucie obrazka svg i chyba on mógłby załatwć sprawę tutaj przykład:
https://jsfiddle.net/e88an9jg/

Ale nie mogę znaleźć włąśnie tej reguły nie za bardzo chyba czaję o co chodzi w tym vievBox próbowałem różnych kombinacji i jakoś nie mogę rozkminić może ktoś pomoże?

michalniemiec28
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
  • Postów: 2
0

Ja bym nie wklejał obrazków svg prosto w html'a. Trzymaj kod svg w osobnym pliku z rozszerzeniem svg. Do html wklej go za pomocą tagu img. Wtedy w css wystarczy width:100% dla tego img i obrazek będzie skalowany do szerokości diva w którym się znajduje.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.