自動的に生成されたSVGにテキストを揃える方法は？

Question

私はSVGのグラフにCSVからデータを変換するプロジェクトを持っています。幅と高さはCSVから取得したデータ（スマートフォン/タブレットアプリのIoToolからのエクスポート）に基づいているため、グラフのサイズは厳密ではありません。

グラフを記述するために、部分的にデータに基づくテキストを追加しました。ブラウザによって見られる画像において

、テキストがある - コード

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

問題は、テキストがなければならないこと、であるている（例えば、そのような説明文の別の6行がある）

Graph name: RR interval 

はテキストの前にスペースを置かずにグラフの左側に整列させてください。そして、代わりに、グラフの左側とテキストの間に大きなスペースがあります。

とコードが

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

であるならば、大きなスペースが最初の要素textは、ソースコードからテキストをインデントしてカウントするかどうのようなテキスト

Graph name: RR interval 

の第2の部分との間にもあります。この動作は、どのフォントファミリが使用されているかに関係なく行われます。私はファミリーsans,sans-serifおよびmonospaceをテストしました。

そして、なぜこのようなことが起こるのか、テキストをグラフの左側にスティックする方法はわかりません。

---

1つの生成された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"を持っているようですね。

デフォルトではスペースは保存されないので、自分で追加する必要があります。そのセットがあるかどうかを確認して削除してください。