SVG 和元素的默认宽度/边距/填充是什么?

I have the following SVG file I am working on. http://jsfiddle.net/slayerofgiants/9y3qc/8/

我正在处理下面的SVG文件。http://jsfiddle.net/slayerofgiants/9y3qc/8/

If you notice from the fiddle file, the horizontal scrollbar extends to about twice the width of the SVG drawing. There is nothing but white space beyond the edge of the SVG. If I remove the <g> and <text> elements, then horizontal scrollbar goes away and is the size of the width of the screen.

如果您从小提琴文件中注意到，水平滚动条的宽度大约是SVG绘图宽度的两倍。在SVG的边缘之外，只有空白。如果我移除和元素，那么水平滚动条就会消失，并且是屏幕宽度的大小。

You can see this on this 2nd jsfiddle http://jsfiddle.net/slayerofgiants/m5zPv/

您可以在第二个jsfiddle http://jsfiddle.net/slayerofgiants/m5zPv/上看到这一点。

The code below is the SVG with no g elements containing the paired text elements.

下面的代码是没有包含成对文本元素的g元素的SVG。

<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>

The code below is the g element with the paired text elements I am using which when inserted into the document causes the scrollbar to extend to about twice the width of the drawing size. I have a number of these with different x values. They are in the #fretinformation g element which is empty in the code above.

下面的代码是g元素，它包含了我正在使用的成对文本元素，当插入到文档中时，会使滚动条的宽度增加到绘图大小的两倍。我有很多不同的x值。它们在#fretinformation g元素中，在上面的代码中是空的。

<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>

I had thought the g element had no width value and the text element width would collapse to only the width of the text it contained. What are the default widths/margin/padding of the g and text elements? And how can I change this behavior so there is no horizontal scrollbar? Thanks--Christopher

我曾经认为g元素没有宽度值，文本元素宽度会崩溃到它所包含的文本的宽度。g和文本元素的默认宽度/边界/填充是什么?我怎样才能改变这种行为所以没有水平滚动条?谢谢,克里斯多夫

EDIT What appears to be happening is the text element is getting a width of 90% of the window size and as the text element is transformed along the x axis, it increases the overall width of the SVG file to be almost twice what it should be. As I remove text elements from right to left, the amount of whitespace to the right of the SVG file decreases.

编辑似乎正在发生的是，文本元素的宽度达到了窗口大小的90%，当文本元素沿着x轴进行转换时，它增加了SVG文件的总体宽度，几乎是它应该的两倍。当我从右向左删除文本元素时，SVG文件右边的空白数量会减少。

2 个解决方案

#1

It is render as an inline-boxe without any extra padding or margins.

它是一种不带任何额外的边距或边距的线框。

I noticed a bug in chrome and another in IE11. wich one bothers you ?

我注意到chrome和IE11中的另一个bug。你有问题吗?

It is somehow a bug that you can fix with : height:1%;(chrome) and overflow:hidden(IE) in your case : DEMO

在某种程度上，它是一个可以修复的bug:高度:1%;(chrome)和溢出:隐藏(IE):演示。

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

jsfiddle re-edited from IE11 : http://jsfiddle.net/9y3qc/13/ to check once again your comment SVG 和元素的默认宽度/边距/填充是什么?

从IE11重新编辑的jsfiddle: http://jsfiddle.net/9y3qc/13/再次查看您的评论。

#2

SVG does not use a box layout model like HTML/CSS.

SVG不使用像HTML/CSS这样的框布局模型。

Putting display="inline" on an SVG element is basically meaningless. SVG elements are placed and drawn where you explicitly tell them.

将display="inline"放在SVG元素上基本上是没有意义的。SVG元素被放置并绘制在您显式地告诉它们的位置。

The thing that determines the width and height of an SVG document is the width and height attributes (and sometimes the viewBox) of the root <svg> element.

决定SVG文档宽度和高度的是根< SVG >元素的宽度和高度属性(有时是viewBox)。

However there are some differences (ie. bugs) in the way browsers lay out SVG elements. The fact that you are getting a scrollbar is an IE bug. You can use GCyrillus' overflow hidden trick to fix that.

不过，也有一些不同之处。在浏览器布局SVG元素的方式中。你得到一个滚动条的事实是一个IE错误。您可以使用GCyrillus的溢出隐藏技巧来修复它。

#1