在任意數量的SVG tspan元素之後繪製線條

我想使用SVG創建一個XSLT模板來生成放置在系統中的訂單的PDF。我的想法是，我有N個訂單的位置（比如3到10），我想要逐行顯示，最後一行和通常的總行之後顯示一條水平線。在任意數量的SVG tspan元素之後繪製線條

這裏有一個例子：

我的問題是，我無法找出如何水平線和最終的總排相對的最後一個順序位置排的位置。這是我到目前爲止有：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g transform="translate(10, 15)"> 
    <rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect> 
    <g transform="translate(10, 0)"> 
    <line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /> 
    <line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /> 
    <g> 
     <text x="0" y="20"> 
     <tspan>Mono layer</tspan> 
     <tspan x="100">$50</tspan> 
     <tspan x="160" style="text-anchor:end">4</tspan> 
     <tspan x="220" style="text-anchor:end">$200</tspan> 
     <tspan x="0" dy="20">Single layer</tspan> 
     <tspan x="100">$25</tspan> 
     <tspan x="160" style="text-anchor:end">3</tspan> 
     <tspan x="220" style="text-anchor:end">$75</tspan> 
     <tspan x="0" dy="20">Double layer</tspan> 
     <tspan x="100">$45</tspan> 
     <tspan x="160" style="text-anchor:end">3</tspan> 
     <tspan x="220" style="text-anchor:end">$135</tspan> 
     <tspan x="0" dy="20">Triple layer</tspan> 
     <tspan x="100">$65</tspan> 
     <tspan x="160" style="text-anchor:end">1</tspan> 
     <tspan x="220" style="text-anchor:end">$65</tspan> 
     <!-- I'd like a line here --> 
     <!-- And the grand total row --> 
     <tspan x="0" dy="30">Total</tspan> 
     <tspan x="100"></tspan> 
     <tspan x="160" style="text-anchor:end">11</tspan> 
     <tspan x="220" style="text-anchor:end">$475</tspan> 
     </text> 
     <line x1="0" y1="150" x2="100%" y2="150" style="stroke:rgb(0,0,0);stroke-width:2" /> 
    </g> 
    </g> 
</g> 
</svg>

我絕不是專家，所以任何建議是極大的讚賞。我以爲我可以用類似於DIV的東西來定義每個位置的行，並且一切都會自動下移。但顯然不是。

來源

2015-11-04 沖原ハーベスト

是否需要爲SVG？這對於HTML表格來說很容易。 –

從技術上講，可以用HTML來完成。我只有一部分是SVG，但嵌入時不會有太大麻煩。整個A4佈局已經在SVG中完成了，這樣可以節省我在HTML中重寫它的麻煩。此外，整個事情最終會轉化爲PDF，所以我寧願從SVG中完成。或者你知道任何HTML轉換爲PDF轉換器，運行良好並保留SVG對象嗎？ –

您目前如何將SVG轉換爲PDF？我認爲有兩種選擇：使用表格並將html/svg轉換爲PDF，或者可以使用行數計算該行的座標。猜猜我們只需要弄清楚哪一個最簡單/更易維護:-) –

將每個訂單行的值dy屬性添加到<text>元素的y座標。這將使您獲得最後一個訂單行的基線的絕對Y位置。

20 + (20 + 20 + 20) = 80.

添加適當數量的額外填充以使您在最後一行（例如10）中的字符下行之下。

然後，將線條的y1和y2座標設置爲最終值（本例中爲90）。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<g transform="translate(10, 15)"> 
 
    <rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect> 
 
    <g transform="translate(10, 0)"> 
 
    <line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /> 
 
    <line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /> 
 
    <g> 
 
     <text x="0" y="20"> 
 
     <tspan>Mono layer</tspan> 
 
     <tspan x="100">$50</tspan> 
 
     <tspan x="160" style="text-anchor:end">4</tspan> 
 
     <tspan x="220" style="text-anchor:end">$200</tspan> 
 
     <tspan x="0" dy="20">Single layer</tspan> 
 
     <tspan x="100">$25</tspan> 
 
     <tspan x="160" style="text-anchor:end">3</tspan> 
 
     <tspan x="220" style="text-anchor:end">$75</tspan> 
 
     <tspan x="0" dy="20">Double layer</tspan> 
 
     <tspan x="100">$45</tspan> 
 
     <tspan x="160" style="text-anchor:end">3</tspan> 
 
     <tspan x="220" style="text-anchor:end">$135</tspan> 
 
     <tspan x="0" dy="20">Triple layer</tspan> 
 
     <tspan x="100">$65</tspan> 
 
     <tspan x="160" style="text-anchor:end">1</tspan> 
 
     <tspan x="220" style="text-anchor:end">$65</tspan> 
 
     <!-- I'd like a line here --> 
 
     <!-- And the grand total row --> 
 
     <tspan x="0" dy="30">Total</tspan> 
 
     <tspan x="100"></tspan> 
 
     <tspan x="160" style="text-anchor:end">11</tspan> 
 
     <tspan x="220" style="text-anchor:end">$475</tspan> 
 
     </text> 
 
     <line x1="0" y1="90" x2="100%" y2="90" style="stroke:rgb(0,0,0);stroke-width:2" /> 
 
    </g> 
 
    </g> 
 
</g> 
 
</svg>

來源

2015-11-04 12:58:30

謝謝你，如果你有一個給定的和恆定數量的行，這確實是一個不容易的事情。只要我有5或6，我必須手動重新計算'y'座標。 –

自從我做了任何XSLT以來，這已經很長時間了，但是您應該能夠計算線條並計算正確的Y座標。 –

XPath來拯救！謝謝，這確實是一個好主意。 –

在任意數量的SVG tspan元素之後繪製線條

回答

相關問題