在任意数量的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元素之后绘制线条

回答

相关问题