Jak używać widoku, gdy wysokość svg zmienia się dynamicznie

Question

Mam rozmiar div. Ma dwa wewnętrzne elementy div. Jeden z wewnętrznych elementów div ma w sobie element svg.

W elemencie svg dodam i usuwam zawartość dynamicznie, tak, że za każdym razem dodam coś na moim svg. Zwiększam jego wysokość, dodając do niego 20 pikseli, a po usunięciu odejmuję wysokość o 20 pikseli. Kiedy moja wysokość svg stanie się większa niż jej div rodzicielski, pasek przewijania pojawi się w div rodzica. Podobnie pasek przewijania jest usuwany, gdy wysokość svg jest mniejsza niż div rodzica.

Problem zaczyna się, gdy wykonuję zmianę rozmiaru. Dodałem opcję przeglądania w moim svg, aby zmienić rozmiar. Ale kiedy zwiększam rozmiar, niektóre z moich elementów svg nie są widoczne. A kiedy zmniejszam rozmiar, mój svg zostanie umieszczony na niższej pozycji, pozostawiając puste miejsce.

To wszystko pomieszało mi w głowie, jak radzić sobie z pozycją/wysokością svg z właściwością viewbox.

Próbowałem zrobić skrzypce, aby jakoś symulować zachowanie. Ale tutaj elementy w svg nie dodają się dynamicznie, a wysokość svg jest stała.

Link to my code

Każda pomoc będzie mile widziane

Answer 1

ostatniej aktualizacji:

Najważniejszym jeśli masz zamiar używać SVG lepiej jest zapoznać się ze specyfikacją lub odczytać określony przewodnik jak "SVG Essentials" by J. Eisenberg, ponieważ nie jest to tak trywialna rzecz, jaką możesz na początku pomyśleć.

Następnie, jeśli dobrze cię zrozumiałem, istnieje inne podejście jsFiddle.

Najpierw ustaw poprawnie wartość atrybutu viewBox. W twoim bieżącym przykładzie powinno być viewBox="0 0 130 220", tak aby cała twoja zawartość była widoczna (musisz podać co najmniej 220 jako ostatnią liczbę, ponieważ ostatnia grupa <g> jest tłumaczona tj. Jest to układ współrzędnych przeniesiony do 200 jednostek, jeśli nie t, że twoja zawartość nie będzie widoczna, ponieważ jest daleko poza najbardziej wysuniętym punktem y twojego okna widoku, które w twoim jsfiddle jest ustawione na 70).

drugie, określić prawidłową wartość preserveAspectRatio która powinna być preserveAspectRatio="xMinYMax meet", co oznacza (dzięki uprzejmości "SVG Essentials" by J. Eisenberg):

Align minimum X viewBox z lewym rogu rzutni.

Wyrównanie maksymalnej wartości y widoku z dolną krawędzią widoku krawędzi.

meet oznacza spełnienie wymagań, nie kroić, jeśli to nie pasuje.

Po trzecie, jeśli masz zamiar dodać elementy do dołu SVG trzeba zmienić wartość viewBox odpowiednio, bo jeśli będzie włożyć do niego czymś jak:

<g transform="translate(0, 300)"> 
    <text>text 55 </text> 
</g> 

będzie występować beyound swoje viewBox, który ma maksymalny punkt y w 220 (jeśli ustawisz go tak, jak powiedziałem wcześniej)

Na razie nadzieję, że pomoże, daj mi znać.

starocie

usunąć style="height:200px" z svg

Następnie jeśli trzeba wysokość, można dynamicznie zmieniać wysokość swojego svg

var $wrapper = $('#resize'), 
    $svg = $('#svg2'); 
$wrapper.resizable({ 
    handles: 'se', 
    aspectRatio: 400/200, 
    resize: function(ev, ui) { 
     $svg.css('height', ui.size.height); 
    } 
}); 

'#resize' - jest id z opakowanie jednostkowe svg

Jestem teraz bardzo zdezorientowany z tego, co chcesz. Podano viewbox attr na svg. Oznacza to, że widoczna będzie tylko część Twojego svg. Spróbuj usunąć viewbox i sprawdzić, czy wynik wygląda zadowalająco.

To wszystko będzie widoczne i normalnie dostosowane do div rodzica