如何在自动生成的 SVG 中对齐文本？

Question

我有将数据从 CSV 转换为 SVG 图形的项目。图形没有严格的尺寸，因为宽度和高度基于从 CSV 获得的数据（即从智能手机/平板电脑应用程序 IoTool 导出）。

为了描述图表，我添加了一些文本 - 也部分基于数据。

在浏览器看到的图像中，有文字（例如——还有另外六行这样的描述性文字）

    Graph name: RR interval

有代码

<text x="0" y="170">
    Graph name:<tspan id="LineName">RR interval</tspan>
</text>

问题是，文本应该与图表的左侧对齐，文本前没有任何空格。取而代之的是，图形左侧和文本之间有很大的空间。

如果代码是

<text x="0" y="170">
    Graph name:
    <tspan id="LineName">RR interval</tspan>
</text>

那么文本的第一部分和第二部分之间也有很大的空间

    Graph name:    RR interval

like if element text 将与源代码中的文本缩进一起计算。无论使用哪种字体系列，此行为都无关紧要。我测试了 generic 系列 sans、sans-serif 和 monospace。

而且我不知道为什么会发生这种情况 - 以及如何将文本粘贴到图表的左侧。

---

一个生成的 svg 的一点缩短代码

<svg xmlns="http://www.w3.rg/2000/svg" xmlns:link="http://www.w3.org/1999/xlink" xml:space="preserve" width="47887pt" height="1197pt" viewbox="0 0 191548 4788">

    <g>         
        <rect x="0" y="0" width="47887" height="1197" style="fill: #EFEFEF;"></rect>
    </g>    
    <g style="stroke-width: 0.5; stroke: #AAAAAA;">         
        <line x1="0" x2="0" y1="0" y2="1197"></line>
            <line x1="200" x2="200" y1="0" y2="1197"></line>
            <line x1="400" x2="400" y1="0" y2="1197"></line>
            <line x1="600" x2="600" y1="0" y2="1197"></line>
            ...
            <line x1="47200" x2="47200" y1="0" y2="1197"></line>
            <line x1="47400" x2="47400" y1="0" y2="1197"></line>
            <line x1="47600" x2="47600" y1="0" y2="1197"></line>
        </g>
        <g style="stroke-width: 0.5; stroke: #AAAAAA;">
            <line x1="0" x2="47887" y1="1197" y2="1197"></line>
            <line x1="0" x2="47887" y1="1097" y2="1097"></line>
            <line x1="0" x2="47887" y1="997" y2="997"></line>
            ...
            <line x1="0" x2="47887" y1="297" y2="297"></line>
            <line x1="0" x2="47887" y1="197" y2="197"></line>
            <line x1="0" x2="47887" y1="97" y2="97"></line>
        </g>
        <g font-size="170" style="font-family: monospace; fill: #005959;">  
            <text x="0" y="170">
                Graph name:
                <tspan id="LineName">RR interval</tspan>        
            </text>
            <text x="0" y="340">
                From time:
                <tspan id="StartTime">2017-09-04 20:10:31.941</tspan>       
            </text>
            ...
            <text x="0" y="1020">
                Minimum value:
                <tspan>722.656</tspan>  
            </text>
            <text x="0" y="1190">
                Maximum value:
                <tspan>1718.75</tspan>      
            </text>                 
        </g>
        <g width="47887" height="1197" style="stroke-width: 1; stroke: #000000; fill: none;">
            <polyline points="0,1055.008 205.4,1047.195 409.6,1027.664 ... 47686.8,958.328 47886.2,976.883 47886.2,988.601"></polyline>
        </g>
    </svg>

Answer 1

听起来您在 SVG 中定义了 xml:space="preserve"。

默认设置是不保留空格，因此您必须自己添加。检查您是否有该设置并将其删除。