Comment utiliser viewbox lorsque la hauteur de svg est de changer dynamiquement

J'ai un redimensionnable div. Il dispose de deux intérieure divs. L'un de l'intérieur de la balise div est un élément svg.

Dans l'élément svg je suis ajout et suppression du contenu de manière dynamique, de sorte que chaque fois que je ajouter quelque chose dans mon fichier svg. Je l'augmentation de sa hauteur par l'ajout de 20px et quand j'ai enlever je soustrais la hauteur de 20px. Quand mon svg hauteur devenir plus grand que son parent div une barre de défilement s'affiche dans le div parent. De même barre de défilement est supprimée lorsque svg hauteur est inférieure div parent.

Le problème commence quand je ne le redimensionnement. J'ai ajouté un viewbox option dans mon fichier svg pour le redimensionnement. Mais quand j'augmente la taille de certains de mes éléments svg ne sont pas visibles.
Et quand je diminue la taille de mon fichier svg placés à une position inférieure en laissant un espace vide.

Son tout foiré dans mon esprit que la façon de traiter svg position/hauteur avec viewbox propriété.

J'ai essayé de faire un violon pour simuler le comportement d'une certaine manière. Mais ici, les éléments svg ne sont pas de l'ajout de façon dynamique et le svg hauteur est constante.

Lien de mon code

Toute aide sera appréciée

Pouvez-vous faire quelques captures d'écran et la poster ici? Et que faites-vous redimensionnez la fenêtre du navigateur ou un div?
ok.Je redimensionner une div
Son genre, de même que le violon lien que j'ai indiqué.
Mise à jour, vous pouvez essayer une autre approche

OriginalL'auteur A_user | 2012-07-27

  1. 5

    DERNIÈRE MISE À JOUR:

    Le plus important si vous allez utiliser SVG, il est préférable de se familiariser avec les spec ou de la lecture définitive du guide "SVG Essentials" par J. Eisenberg, la cause n'est pas une chose banale que vous pourriez penser au premier abord.

    Alors si j'ai bien compris vous avez droit, il y a une autre approche jsFiddle.

    D'abord, réglez correctement la valeur de la viewBox attribut. Dans votre exemple, devrait être viewBox="0 0 130 220" de sorte que la totalité de votre contenu visible (vous devez spécifier au moins 220 comme le dernier numéro de la cause de votre dernier groupe <g> est traduit c'est à dire que c'est le système de coordonnées de déplacer vers le bas de 200 unités, si vous ne le faites pas, votre contenu sera pas visible car il est bien au-delà de la plus haute y-point de votre viewbox, qui, dans votre jsfiddle est fixé à 70).

    Deuxième, spécifiez la valeur correcte pour preserveAspectRatio qui devrait être preserveAspectRatio="xMinYMax meet", ce qui signifie (avec l'aimable autorisation de la "SVG Essentials" par J. Eisenberg):

    Aligner minimum x de viewBox avec coin gauche de
    fenêtre d'affichage.

    Aligner le maximum de valeur y de négatoscopes à fond
    bord de la fenêtre d'affichage.

    meet moyens de satisfaire le contenu, pas de trancher, si elle ne rentre pas.

    Troisièmement, si vous allez à ajouter des éléments à la base de votre svg, vous devrez changer le viewBox valeur en conséquence, la cause si vous insérez dans ce qch comme:

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

    qu'il va se produire beyound votre viewBox, qui a un max de y point à 220 (si vous définissez comme je l'ai dit plus tôt)

    Pour l'instant espère que ça aide, faites le moi savoir.

    VIEUX TRUCS

    supprimer style="height:200px" de votre svg

    Alors si vous avez besoin de la hauteur, vous pouvez modifier dynamiquement la hauteur de votre svg

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

    '#resize' - est de la id de l'emballage de la svg

    Je suis maintenant très confuse de ce que vous voulez. Vous avez spécifié viewbox attr sur le svg. Cela signifie que seulement une partie de votre svg sera visible. Essayez de supprimer viewbox et voir si le résultat est satisfaisant pour vous.

    - Il alors être visible et normalement ajusté à la div parent

    Je ne peux pas supprimer ce parce que...je dois régler quelques inital hauteur
    Merci beaucoup pour votre aide et vos conseils, mais.....il va faire mon svg hauteur = div hauteur....dans le cas que j'ai à ajouter plus de contenu svg qu'il ne sera pas visible
    Hmm...ok merci beaucoup pour votre aide.mais je suis nouveau, je ne sais pas ce qu'est un wrapper
    essayez de supprimer viewbox peut-être que c'est ce dont vous avez besoin
    quand j'enlève la viewbox puis sur le redimensionnement du texte est très petit 🙁

    OriginalL'auteur user907860