Centrer les éléments SVG sur sa zone

-3

Regardez this fiddle.Centrer les éléments SVG sur sa zone

Le code est complexe mais la question en est simple. Je veux juste centrer le contenu SVG du tableau de jauge. Vous pouvez voir le carré rouge qui est la zone SVG. Je veux me contenter (le graphique) de se placer sur son centre. Cela ne me dérange pas si elle récolte, je peux l'ajuster plus tard.

J'ai essayé avec CSS margin et padding mais aucun travaillé. Et Kendo n'a aucune méthode pour le centrer.

Source

2013-06-17 DontVoteMeDown

http://jsfiddle.net/gWyhE/1/

Dans le violon que je vous ai j'ai ajouté padding-bottom et padding-left dans l'élément .gauge-container svg.

J'espère avoir aidé.

Source

2013-06-17 19:39:25 copypaste

si jsFiddle fait sauter un jour? Tant la question que cette réponse deviennent complètement inutiles. S'il vous plaît poster votre code dans votre réponse avec une meilleure explication – Bojangles

Rien à expliquer réellement, seulement 2 éléments simples. – copypaste

@Bojangles C'est la raison pour laquelle je ne poste pas le code entier: http://stackoverflow.com/questions/17053893/ie9-x-frame-options-deny-upload 60 vues juste 1 réponse. Certaines personnes sont paresseuses pour lire un long code et ferment simplement votre question sans atteindre le milieu. Ma question est simple et le code est trop long pour l'afficher entièrement. – DontVoteMeDown

Apparemment, vous devez ajouter à votre margingaugeArea:

margin: { top: -margin, left: margin/2, right: -margin/2, bottom: margin/2 },

http://jsfiddle.net/VZAa7/

Notez que la raison pour laquelle la marge supérieure doit être le double si ...

Source

2013-06-17 20:08:29

Votre réponse a résolu mon problème non seulement pour l'alignement horizontal mais aussi pour la verticale. – DontVoteMeDown

Vous devez définir votre svg viewBox pour préserver le ratio d'aspect au milieu:

Par exemple:

<svg 
    ... 
    preserveAspectRatio="xMidYMid" 
    viewBox="0 0 370 430" 
    ... 
></svg>

Cela signifie que le contenu du svg sera mis à l'échelle à partir du milieu plutôt qu'à gauche ou à droite.

Plus d'informations peuvent être trouvées ici: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

Aussi, pour vous assurer que tout est mise à l'échelle correctement, vous pouvez appliquer le CSS suivant à votre svg:

.responsive-svg { 
    width: 100%; 
    max-width: 100%; 
    height:auto; 
}

Source

2015-08-11 01:30:30 user3867001

Centrer les éléments SVG sur sa zone

Répondre

Questions connexes