Chcę mieć skalę zawartości wbudowanego elementu svg, gdy rozmiar nie jest rodzimy. Oczywiście mógłbym go mieć jako osobny plik i skalować w ten sposób.
index.html: <img src="foo.svg" style="width: 100%;" />
foo.svg: <svg width="123" height="456"></svg>
Chcę jednak dodać dodatkowe style do SVG poprzez CSS, więc połączenie zewnętrznego nie jest opcją. Jak zrobić wbudowaną skalę SVG?
Odpowiedzi:
Aby określić współrzędne w obrazie SVG niezależnie od przeskalowanego rozmiaru obrazu, użyj
viewBox
atrybutu na elemencie SVG, aby zdefiniować pole ograniczające obrazu w układzie współrzędnych obrazu, a także użyj atrybutówwidth
i,height
aby zdefiniować szerokość lub wysokość odnoszą się do strony zawierającej.Na przykład, jeśli masz następujące elementy:
Będzie renderowany jako trójkąt 10 na 20 pikseli:
Teraz, jeśli ustawisz tylko szerokość i wysokość, to zmieni rozmiar elementu SVG, ale nie skaluje trójkąta:
Jeśli ustawisz pole widoku, spowoduje to przekształcenie obrazu w taki sposób, że dane pole (w układzie współrzędnych obrazu) zostanie przeskalowane w górę, aby pasowało do podanej szerokości i wysokości (w układzie współrzędnych strony). Na przykład, aby powiększyć trójkąt do rozmiaru 100 na 50 pikseli:
Jeśli chcesz przeskalować go do szerokości rzutni HTML:
Należy pamiętać, że domyślnie współczynnik kształtu jest zachowany. Jeśli więc określisz, że element powinien mieć szerokość 100%, ale wysokość 50 pikseli, w rzeczywistości będzie skalowany tylko do wysokości 50 pikseli (chyba że masz bardzo wąskie okno):
Jeśli chcesz, aby rozciągał się w poziomie, wyłącz zachowanie proporcji obrazu za pomocą
preserveAspectRatio=none
:(zauważ, że chociaż w moich przykładach używam składni, która działa na potrzeby osadzania HTML, aby uwzględnić przykłady jako obraz w StackOverflow, zamiast tego osadzam w innym SVG, więc muszę użyć prawidłowej składni XML)
źródło
width="100%"
i bez określonej wysokości robi to, co chcesz. Dodałem zdjęcia do zademonstrowania. Ma 100% szerokości i proporcjonalnie zwiększa wysokość. Jeśli nie tego szukasz, czy możesz spróbować wyjaśnić, co miałeś na myśli?width
orazheight
dla elementu SVG jest w 100%, nie jest definicją CSS 100% (100% bloku zawierającego), lecz zamiast 100% wziernika, które zostały określone w oparciu o stosunek wewnętrzną kształtu ( który jest obliczany odviewBox
momentu podania). Nie znalazłem jeszcze rozwiązania tego problemu, który działa w Chrome / Safari.Po około 48 godzinach badań skończyłem tak, aby uzyskać proporcjonalne skalowanie:
UWAGA: Ta próbka jest napisana za pomocą React. Jeśli nie używasz, że zmiany case wielbłąd rzeczy z powrotem do kresek (tj zmian
backgroundColor
dobackground-color
i zmienić stylObject
z powrotem doString
).Oto, co dzieje się w powyższym przykładowym kodzie:
WIDOK
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, szerokość i wysokość
tj .: viewbox = "0 0 1000 1000"
Viewbox jest ważnym atrybutem, ponieważ w zasadzie informuje SVG, jaki rozmiar narysować i gdzie. Jeśli użyłeś CSS do zrobienia SVG o wymiarach 1000 x 1000 pikseli, ale Twój viewbox miał wymiary 2000 x 2000, zobaczysz lewą górną ćwiartkę SVG.
Pierwsze dwie liczby, min-x i min-y, określają, czy SVG powinien być przesunięty w polu widzenia.
Zbadaj to: viewbox = "50 50 450 450"
Pierwsze dwie liczby przesuną twój plik SVG w lewo o 50 pikseli i w górę o 50 pikseli, a dwie pozostałe liczby to rozmiar pola widzenia: 450 x 450 pikseli. Jeśli Twój plik SVG ma wymiary 500 x 500, ale ma na nim dodatkowe dopełnienie, możesz manipulować tymi liczbami, aby przenosić je w „polu widzenia”.
Twoim celem w tym momencie jest zmiana jednej z tych liczb i zobaczenie, co się stanie.
Możesz również całkowicie pominąć pole widzenia, ale wtedy twój przebieg będzie się różnić w zależności od każdego innego ustawienia, jakie masz w tym czasie. Z mojego doświadczenia wynika, że napotkasz problemy z zachowaniem współczynnika kształtu, ponieważ viewbox pomaga zdefiniować współczynnik kształtu.
ZACHOWAJ PROPORCJE
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Z moich badań wynika, że istnieje wiele różnych ustawień współczynnika kształtu, ale domyślnie nazywa się to
xMidYMid meet
. Nakładam to na moje, aby wyraźnie sobie przypomnieć.xMidYMid meet
sprawia, że skaluje się proporcjonalnie w oparciu o punkt środkowy X i Y. Oznacza to, że pozostaje wyśrodkowany w polu podglądu.SZEROKOŚĆ
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Spójrz na mój przykładowy kod powyżej. Zauważ, jak ustawiam tylko szerokość, bez wysokości. Ustawiłem go na 100%, aby wypełniał pojemnik, w którym się znajduje. To prawdopodobnie najbardziej przyczynia się do odpowiedzi na pytanie przepełnienia stosu.
Możesz go zmienić na dowolną wartość piksela, ale zalecam użycie 100%, tak jak zrobiłem, aby powiększyć go do maksymalnego rozmiaru, a następnie kontrolować za pomocą CSS za pośrednictwem kontenera nadrzędnego. Polecam to, ponieważ uzyskasz „odpowiednią” kontrolę. Możesz używać zapytań o media i kontrolować rozmiar bez szalonego JavaScript.
SKALOWANIE Z CSS
Ponownie spójrz na mój przykładowy kod powyżej. Zwróć uwagę, jak mam te właściwości:
Jest to dodatkowe, ale pokazuje, jak zezwolić użytkownikowi na zmianę rozmiaru SVG przy zachowaniu odpowiedniego współczynnika proporcji. Ponieważ SVG zachowuje swój własny współczynnik kształtu, wystarczy zmienić rozmiar kontenera nadrzędnego, a jego rozmiar zmieni się zgodnie z potrzebami.
Wysokość zostawiamy w spokoju i / lub ustawiamy ją na auto, i kontrolujemy zmianę rozmiaru za pomocą szerokości. Wybrałem szerokość, ponieważ często jest bardziej znacząca ze względu na responsywne projekty.
Oto obraz używanych ustawień:
Jeśli czytasz wszystkie rozwiązania zawarte w tym pytaniu i nadal jesteś zdezorientowany lub nie rozumiesz, czego potrzebujesz, sprawdź ten link tutaj. Uważam to za bardzo pomocne:
https://css-tricks.com/scale-svg/
Jest to ogromny artykuł, ale rozkłada się praktycznie każdy możliwy sposób manipulowania SVG, z CSS lub bez. Zalecam przeczytanie go podczas swobodnego picia kawy lub wyboru wybranych płynów.
źródło
Będziesz chciał wykonać transformację jako taką:
z JavaScript:
Z CSS:
Zawiń swoją stronę SVG w tag Group jako taki i ukierunkuj ją, aby manipulować całą stroną:
Uwaga : Skala 1.0 wynosi 100%
źródło
Bałagan i okazało się, że ten CSS zawiera plik SVG w przeglądarce Chrome do momentu, gdy kontener jest większy niż obraz:
Wydaje się również działać w FF + IE 11.
źródło
max-width: 100%
imax-height: 100%
sprawi, że svg zawsze będzie skalować się do kontenera bez przepełnienia lub utraty współczynnika kształtu.max-height: 100%
nie działa dla mnie, rozwiązany przy użyciuvh
zamiast%
zmiana pliku SVG nie była dla mnie sprawiedliwym rozwiązaniem, więc zamiast tego użyłem względnych jednostek CSS .
vh
,vw
,%
Są bardzo wygodne. Użyłem CSS, jakheight: 2.4vh;
ustawić dynamiczny rozmiar moich obrazów SVG.źródło
Innym prostym sposobem jest
źródło
Dostosowanie atrybutu currentScale działa w IE (testowałem z IE 11), ale nie w Chrome.
źródło