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

Christopher Gaston 发表于 Dev

克里斯托弗·加斯顿

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

如果您从小提琴文件中注意到，则水平滚动条的宽度大约是SVG图形的宽度的两倍。SVG边缘之外没有空白。如果删除<g>和<text>元素，则水平滚动条消失，它是屏幕宽度的大小。

您可以在第二个jsfiddle http://jsfiddle.net/slayerofgiants/m5zPv/

下面的代码是SVG，其中没有g包含配对text元素的元素。

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

下面的代码是我正在使用的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元素没有width值，并且text元素的width只能折叠到它包含的文本的宽度。和元素的默认设置widths/margin/padding是什么？以及如何更改此行为，以便没有水平滚动条？谢谢-克里斯托弗gtext

编辑似乎正在发生的是，该text元素的宽度达到窗口大小的90％，并且随着text元素沿x轴变换，它使SVG文件的总宽度增加了几乎两倍于应有的宽度。当我从右向左删除文本元素时，SVG文件右侧的空白量减少了。

西里尔

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

我注意到chrome中的一个错误和IE11中的另一个错误。有谁会打扰你？

在某种情况下，您可以使用：height:1%;（chrome）和overflow:hidden（IE）修复此错误：DEMO

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

jsfiddle从IE11重新编辑：http : //jsfiddle.net/9y3qc/13/以再次检查您的评论 SVG在IE11中不溢出

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章