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

Question

我有项目在SVG中将数据从CSV转换为图形。图表的大小不严格，因为宽度和高度基于从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

就像元素text会使用源代码中的text-indent一样。无论使用哪种字体系列，此行为都无关紧要。我测试了通用族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"。

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