Question

我想使用SVG创建一个XSLT模板来生成系统中订单的PDF。我的想法是我有N个位置（比如3到10之间），我希望逐行显示，最后一行和通常的总行后面有一条水平线。

这里是一个例子：

我的问题是我无法找到如何将水平线和最后一行相对于最后一个订单位置行定位。这就是我到目前为止所拥有的：

<?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的东西来定义每个位置行，并且一切都会自动降低。但显然不是。

Answer 1

将每个订单行的dy属性值添加到y元素的<text>坐标。这将获得最后一个订单行基线的绝对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>

在任意数量的SVG tspan元素之后绘制一条线

1 个答案: