SVG <g> 和 <text> 元素的默认宽度/边距/填充是多少？

Posted 2023-03-06

【中文标题】SVG <g> 和 <text> 元素的默认宽度/边距/填充是多少？

【英文标题】：What is the default width/margin/padding of SVG <g> and <text> elements?

【发布时间】：2014-07-13 23:42:10

【问题描述】：

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

如果您从小提琴文件中注意到，水平滚动条会延伸到 SVG 绘图宽度的两倍左右。 SVG 边缘之外只有空白区域。如果我删除了<g> 和<text> 元素，那么水平滚动条就会消失，并且是屏幕宽度的大小。

你可以在第二个 jsfiddle 上看到这个 http://jsfiddle.net/slayerofgiants/m5zPv/

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

<svg version="1.1"  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- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="45" x2="262" y2="45"/>
        <line fill="none" id="Astring" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="38.5" x2="262" y2="38.5"/>
        <line fill="none" id="Dstring" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="32" x2="262" y2="32"/>
        <line fill="none" id="Gstring" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="25.5" x2="262" y2="25.5"/>
        <line fill="none" id="Bstring" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="19" x2="262" y2="19"/>
        <line fill="none" id="highE" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" x1="6" y1="12.5" x2="262" y2="12.5"/>
</g>
<rect x="258" y="12" display="inline"  />
<rect x="260" y="12" display="inline"  />
<rect x="78" y="12" display="inline"  />
<rect x="6" y="12" display="inline"  />
<rect x="204" y="12" display="inline"  />
<rect x="142" y="12" display="inline"  />
<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>

下面的代码是g 元素和我正在使用的成对的text 元素，当插入到文档中时，滚动条会延伸到大约两倍于绘图大小的宽度。我有许多具有不同 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>

我原以为g 元素没有宽度值，文本元素的宽度会折叠到它所包含的文本的宽度。 g 和 text 元素的默认 widths/margin/padding 是什么？我怎样才能改变这种行为，所以没有水平滚动条？ 谢谢--克里斯托弗

编辑 似乎正在发生的事情是text 元素的宽度为窗口大小的 90%，并且随着文本元素沿 x 轴进行转换，它将 SVG 文件的整体宽度几乎增加了两倍。是。当我从右到左删除文本元素时，SVG 文件右侧的空白量会减少。

【问题讨论】：

viewbox 属性隐藏了溢出 SVG 的内容，但它仍然存在，并且在内联文档时从浏览器到另一个浏览器的处理方式不同。假设它的行为类似于内联框对象或 img。

【参考方案1】：

SVG 不使用 box layout model 像 html/CSS。

将display="inline" 放在SVG 元素上基本上是没有意义的。 SVG 元素放置和绘制在您明确告诉它们的位置。

决定 SVG 文档宽度和高度的是根 <svg> 元素的 width 和 height 属性（有时是 viewBox）。

但是，浏览器布局 SVG 元素的方式存在一些差异（即错误）。您获得滚动条的事实是 IE 错误。你可以使用 Gcyrillus 的溢出隐藏技巧来解决这个问题。

【参考方案2】：

它被渲染为一个内联框，没有任何额外的填充或边距。

我注意到 chrome 中的一个错误和 IE11 中的另一个错误。哪一个让你烦恼？

在你的情况下，你可以使用 height:1%;(chrome) 和 overflow:hidden(IE) 修复它：@987654321 @

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

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

【讨论】：

我实际上正在使用 Internet Explorer 11。查看您的链接，我仍然看到一个水平滚动条，它大约是 svg 绘图宽度的两倍。添加高度属性并没有解决问题。问题与 g 元素或 text 元素的宽度有关。

啊，我明白了，另一个与 Chrome 不同的错误，修复它的方法是添加：溢出：隐藏到 svg。 jsfiddle.net/9y3qc/10

overflow:hidden 确实有效，但是，它没有回答 svg 文本元素的默认宽度是多少的问题，也没有回答如何设置或更改该宽度。

@ChristopherGaston 所以澄清你的问题：截图，浏览器，使用什么代码。 jsfiddle.net/9y3qc/10 为我在 IE11、Chrome、Firefox、Opera 最新版本中无法滚动。你真的检查了吗？

我确实尝试了overflow:hidden，它确实删除了水平滚动条，但是它引入了其他问题。我的图像是动态调整大小的，并在两个主要的 svg 元素块之间交换。使用 `overflow:hidden' 选项，整个图像在调整大小时不再是动态的，并且图像的其他部分现在超出了视平面并且不再可见。是否有任何其他选项可以折叠文本元素的宽度，使其仅是它包含的文本的大小？