Wie Viewbox verwenden, wenn Höhe von Svg dynamisch ändert

Question

Ich habe eine resizable div. Es hat zwei innere divs. Einer der inneren divs enthält ein Svg-Element.

In der SVG-Element bin ich hinzufügen und entfernen Sie den Inhalt dynamisch, so dass jedes Mal, wenn ich etwas in meinem Svg hinzufügen. Ich vergrößere seine Höhe um 20px und entferne die Höhe um 20px. Wenn meine Svg-Höhe größer als das Eltern-Div wird, wird im Eltern-Div eine Bildlaufleiste angezeigt. Auf ähnliche Weise wird die Bildlaufleiste entfernt, wenn die svg-Höhe kleiner ist als die des übergeordneten Elements.

Das Problem beginnt, wenn ich die Größenänderung mache. Ich habe eine Viewbox-Option in meinem Svg für die Größenänderung hinzugefügt. Aber wenn ich die Größe vergrößere, sind einige meiner Svg-Elemente nicht sichtbar. Und wenn ich die Größe verkleinere, wird meine Svg auf eine niedrigere Position gebracht, die leer bleibt.

Es ist alles vermasselt in meinem Kopf, wie Svg Position/Höhe mit Viewbox-Eigenschaft zu behandeln.

Ich habe versucht, eine Geige zu machen, um das Verhalten irgendwie zu simulieren. Aber hier Elemente in Svg sind nicht dynamisch hinzufügen und die Svg Höhe ist konstant.

Link to my code

Jede Hilfe wird

Answer 1

AKTUELLE UPDATE geschätzt werden:

Wichtigste, wenn Sie SVG es besser ist, verwenden werden eine bestimmte Anleitung vertraut zu sein mit spec oder lesen wie "SVG Essentials" by J. Eisenberg, weil es nicht so eine triviale Sache ist, die man zuerst denken könnte.

Dann wenn ich dich richtig verstanden habe, gibt es einen anderen Ansatz jsFiddle.

Zuerst den Wert des Attributs viewBox richtig einstellen. In Ihrem aktuellen Beispiel sollte viewBox="0 0 130 220" so sein, dass alle Inhalte sichtbar sind (Sie müssen mindestens 220 als letzte Zahl angeben, weil Ihre letzte Gruppe <g> übersetzt wird dh das Koordinatensystem wurde auf 200 Einheiten verschoben, wenn Sie nicht ' t, dass Ihr Inhalt nicht sichtbar ist, weil es weit über den äußersten y-Punkt Ihrer Viewbox hinausgeht, die in Ihrer Datei auf 70 gesetzt ist.

Zweitens geben Sie den richtigen Wert für preserveAspectRatio die preserveAspectRatio="xMinYMax meet" sein sollte, was bedeutet (mit freundlicher Genehmigung des "SVG Essentials" by J. Eisenberg):

Align Mindest x von viewBox mit links Ansichtsfenster.

Richten Sie den maximalen y-Wert von viewBox mit der unteren Kante des Ansichtsfensters aus.

meet bedeutet den Inhalt zu treffen, nicht zu schneiden, wenn es nicht passt.

Drittens: Wenn Sie Elemente auf der Unterseite Ihres svg Sie die entsprechend viewBox Wert ändern müssen gehen hinzuzufügen, verursachen, wenn Sie einfügen wird in es smth wie:

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

es vorkommen, wird beyound Ihre viewBox, die einen maximalen y-Punkt bei 220 hat (wenn du es wie vorher gesagt setzen würdest)

Für jetzt hoffe das hilft, lass es mich wissen.

OLD STUFF

entfernen style="height:200px" von Ihrem svg

Dann, wenn Sie Höhe benötigen, können Sie dynamisch die Höhe Ihres svg

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

'#resize' ändern kann - ist die id der Verpackung der svg

Ich bin jetzt sehr verwirrt von dem, was Sie wollen. Sie haben viewbox attr auf der svg angegeben. Das bedeutet, dass nur ein Teil Ihrer svg sichtbar ist. Versuchen Sie, viewbox zu entfernen und sehen Sie, ob das Ergebnis für Sie zufriedenstellend aussieht.

Dann werden alle sichtbar und normalerweise auf Eltern div