Quelle est la largeur par défaut/margin/padding de SVG <g> et <texte> éléments?

J'ai le texte suivant fichier SVG, je suis en train de travailler sur.
http://jsfiddle.net/slayerofgiants/9y3qc/8/

Si vous remarquez de la tripoter fichier, la barre de défilement horizontale s'étend à environ deux fois la largeur du dessin SVG. Il n'y a rien, mais l'espace blanc au-delà du bord de la SVG. Si je supprime le <g> et <text> éléments, puis la barre de défilement horizontal s'en va et est la taille de la largeur de l'écran.

Vous pouvez le voir sur ce 2ème jsfiddle
http://jsfiddle.net/slayerofgiants/m5zPv/

Le code ci-dessous est le SVG sans g éléments contenant les paires de text éléments.

<svg version="1.1" width="90%" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px"  viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
xml:space="preserve" preserveAspectRatio="xMinYMid meet">
<font horiz-adv-x="1000">
<g id="fullTAB"  transform="scale(1.1,1)"  >
<g id="tablines" display="block">
<line fill="none" id="lowE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="45" x2="262" y2="45"/>
<line fill="none" id="Astring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="38.5" x2="262" y2="38.5"/>
<line fill="none" id="Dstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="32" x2="262" y2="32"/>
<line fill="none" id="Gstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="25.5" x2="262" y2="25.5"/>
<line fill="none" id="Bstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="19" x2="262" y2="19"/>
<line fill="none" id="highE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="12.5" x2="262" y2="12.5"/>
</g>
<rect x="258" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="260" y="12" display="inline" width="2.618" height="32.73"/>
<rect x="78" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="6" y="12" display="inline" width="1" height="32.73"/>
<rect x="204" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="142" y="12" display="inline" width="0.829" height="32.73"/>
<text x="13" y="21" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">T</text>
<text x="13" y="31" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">A</text>
<text x="13" y="41" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">B</text>
<g id="fretinformation">    
</g><!--Fret Information -->
</g><!--Full Tab -->
</svg>

Le code ci-dessous est la g élément avec les paires de text éléments de je suis, en l'utilisant, lorsqu'il est inséré dans le document causes de la barre de défilement pour s'étendre à environ deux fois la largeur de la taille du dessin. J'ai un certain nombre de ces différentes valeurs de x. Ils sont dans la #fretinformation g élément qui est vide dans le code ci-dessus.

<g display="inline">
<text x="248" y="35" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">2</text>
<text x="248" y="41.5" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">3</text>
</g>

J'avais pensé la g élément n'avait pas de valeur de la largeur et de l'élément de texte largeur allait s'effondrer pour que la largeur du texte qu'il contient. Ce sont les valeurs par défaut widths/margin/padding de la g et text éléments? Et comment puis-je changer ce comportement, donc il n'y a pas de barre de défilement horizontale?
Merci, Christopher

MODIFIER
Ce qui semble se passer, c'est la text élément est l'obtention d'une largeur de 90% de la taille de la fenêtre et que l'élément de texte est transformé le long de l'axe des x, il augmente la largeur totale du fichier SVG presque le double de ce qu'il devrait être. Comme je l'ai supprimer des éléments de texte de droite à gauche, la quantité d'espaces à droite du fichier SVG diminue.

  • l'attribut viewbox cache ce dépassements de votre SVG, mais il est toujours là et manipulés différent d'un navigateur à l'autre lorsqu'ils sont incorporés document. il est supposé se comporter comme un inline-boxe comme objet ou img.
InformationsquelleAutor Christopher Gaston | 2014-05-24
  1. 4

    Il est rendu comme un inline-boxe sans aucun rembourrage supplémentaire ou des marges.

    J'ai remarqué un bug dans chrome et une autre dans IE11. qui vous dérange ?

    C'est en quelque sorte un bug que vous pouvez fixer avec : height:1%;(chrome) et overflow:hidden(IE) dans votre cas : DÉMO

    svg {
display:block;
border:solid;
width:90%;
height:1%; /* fix webkit */
overflow:hidden;/* fix IE */
}

    jsfiddle ré-édité à partir d'IE11 : http://jsfiddle.net/9y3qc/13/ de vérifier une fois de plus votre commentaire
    Quelle est la largeur par défaut/margin/padding de SVG <g> et <texte> éléments?

    • Je suis en fait à l'aide d'internet explorer 11. En regardant ton lien, je vois toujours une barre de défilement horizontale qui est d'environ deux fois la largeur du dessin svg. L'ajout de l'attribut hauteur n'a pas résolu le problème. Le problème a quelque chose à voir avec la largeur de la g de l'élément ou de l'élément de texte.
    • ah je vois , un autre bug différent de Chrome, le moyen pour résoudre ce problème est d'ajouter : overflow:hidden pour svg. jsfiddle.net/9y3qc/10
    • le overflow:hidden fonctionne, cependant, il ne répond pas à la question de ce que la largeur par défaut de la svg de l'élément de texte ni de répondre à la façon de définir ou de modifier cette largeur.
    • afin de clarifier votre question : capture d'écran, ce qui navigateur , quel est le code utilisé . jsfiddle.net/9y3qc/10 produit pour moi, pas de défilement inIE11, Chrome , Firefox, Opera dernière version. avez-vous vraiment le vérifier ?
    • J'ai essayé la overflow:hidden et il n'a supprimer de la barre de défilement horizontale, cependant, il introduit d'autres problèmes. Mon image est redimensionné dynamiquement et est échangé entre les deux principaux blocs d'éléments svg. Avec le "overflow:hidden' option, l'ensemble de l'image est plus dynamique dans le redimensionnement et d'autres parties de l'image sont en train d'étendre au-delà de la viewplane et ne sont plus visibles. Est-il une autre option pour replier la largeur de l'élément de texte de sorte qu'il est de la taille du texte qu'elle contient?
    • Bonjour, je ne suis pas plus de vous, votre violon a une SVG à laquelle le dépassement est réglé . l'attribut viewbox lui donne une taille ( si <texte> est l'ensemble de cette zone ou de plus grand, de tout ou partie de il sera caché ) , de sorte qu'il peut redimensionner. - Vous me dire sur le texte et l'image, sont présentes à l'intérieur de SVG ou est-il autre élément HTML ou texte de côté dans votre document ? pouvez-vous définir un nouveau tripoter ce que vous éprouvez de la difficulté à maintenant ?
    • Mon jsfiddle a été simplifié pour cette question. L'ensemble du projet est assez complexe. Voici un lien pour le violon, de la grand projet que j'ai jusqu'ici. jsfiddle.net/slayerofgiants/DRBr2/1 Avec le personnel montrant, si vous modifiez la clé de Go, vous pourrez voir où il s'étend au-delà de la fenêtre d'affichage lorsque le overflow:hidden est présent dans le css.
    • j'ai augmenté la largeur de la viewbox , de sorte que toutes les mesures sont vu : jsfiddle.net/DRBr2/4 je n'ai toujours pas de barre de défilement dans IE11. Désolé , je ne pourrais pas comprendre ce qu'est votre problème.
    • ok, je vois maintenant sur la plus grande résolution. vous avez besoin d'augmenter la viewbox hauteur trop et repositionner les onglets/mesure un peu plus bas si vous avez de la place du haut vers le bas pour afficher plus et le moins de notes. Firefox s'applique le overflow:caché par défaut.

    InformationsquelleAutor G-Cyr
  2. 9

    SVG ne pas utiliser un box layout model comme HTML/CSS.

    Mettre display="inline" sur un SVG élément est simplement pas de sens. Éléments SVG sont placé et dessinée où vous l'avez explicitement leur dire.

    La chose qui détermine la largeur et la hauteur d'un document SVG est le width et height attributs (et parfois le viewBox) de la racine <svg> élément.

    Cependant, il existe quelques différences (ie. bugs) dans la façon dont les navigateurs posez des éléments SVG. Le fait que vous êtes l'obtention d'une barre de défilement est un IE bug. Vous pouvez utiliser GCyrillus' overflow hidden astuce pour résoudre ce problème.

    InformationsquelleAutor Paul LeBeau