Jak mogę wykonać skalę SVG za pomocą kontenera nadrzędnego?

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?

Aby określić współrzędne w obrazie SVG niezależnie od przeskalowanego rozmiaru obrazu, użyj viewBoxatrybutu na elemencie SVG, aby zdefiniować pole ograniczające obrazu w układzie współrzędnych obrazu, a także użyj atrybutów widthi, heightaby zdefiniować szerokość lub wysokość odnoszą się do strony zawierającej.

Na przykład, jeśli masz następujące elementy:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

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:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

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:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Jeśli chcesz przeskalować go do szerokości rzutni HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

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):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Jeśli chcesz, aby rozciągał się w poziomie, wyłącz zachowanie proporcji obrazu za pomocą preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(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)

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 backgroundColordo background-colori zmienić styl Objectz powrotem do String).

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

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.

Mój SVG musi się zmieniać w górę / w dół lub w lewo / w prawo

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 meetsprawia, ż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:

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

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.

Będziesz chciał wykonać transformację jako taką:

z JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

Z CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Zawiń swoją stronę SVG w tag Group jako taki i ukierunkuj ją, aby manipulować całą stroną:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Uwaga : Skala 1.0 wynosi 100%

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:

div.inserted-svg-logo svg { max-width:100%; }

Wydaje się również działać w FF + IE 11.

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, jak height: 2.4vh;ustawić dynamiczny rozmiar moich obrazów SVG.

Innym prostym sposobem jest

transform: scale(1.5);

Dostosowanie atrybutu currentScale działa w IE (testowałem z IE 11), ale nie w Chrome.