XSL-FO中的进度 - 径向，线性梯度

Question

是否可以使用SVG或其他方式在XSL-fo中创建径向进度条？

我有一个任务可以从xsl-fo中编写的XSL生成pdf文档。我们的CSS专家为它编写了代码（但不能帮助我使用pdf生成和xsl-fo），但不知道如何在xsl-fo中重新创建它，以便PDF文档具有正确的进度条百分比。

这是我应该重新什么：他的CSS代码 Radial progress bar 部分是：

.progress-radial { 
    float: left; 
    margin-right: 30px; 
    position: relative; 
    width: 140px; 
    height: 140px; 
    border-radius: 50%; 
    border: 2px solid #aa94a8; 
    background-color: #5d2f5d 
} 
.progress-radial .overlay { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: #fff; 
    border-radius: 50%; 
    margin-left: 20px; 
    margin-top: 20px; 
    text-align: center; 
    line-height: 100px; 
    font-size: 32px; 
    color: #6c566a 
} 
.progress-0 { 
    background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(90deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8) 
} 
.progress-1 { 
    background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(93.6deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8) 
} 
.progress-2 { 
    background-image: linear-gradient(90deg, #aa94a8 50%, transparent 50%, transparent), linear-gradient(97.2deg, #5d2f5d 50%, #aa94a8 50%, #aa94a8) 
} 

谢谢

Answer 1

如果使用的是AH格式化，那么你可以使用linear-gradient()。见https://www.antennahouse.com/product/ahf64/ahf-ext.html#linear-gradient。否则，你可以在fo:instream-foreign-object内生成你想要的SVG。

Answer 2

这里有一些灵感来运行。鉴于这种XML：

<charts> 
    <chart percent="20"/> 
    <chart percent="40"/> 
    <chart percent="90"/> 
</charts> 

而且使用这种简单的XSL（我已经消除了所有的XSL FO页的东西）：

<xsl:template match="charts"> 
    <xsl:apply-templates/> 
</xsl:template> 
<xsl:template match="chart"> 
    <fo:block> 
     <fo:instream-foreign-object> 
      <xsl:call-template name="drawchart"> 
       <xsl:with-param name="percent" select="@percent"/> 
       <xsl:with-param name="r" select="90"/> 
      </xsl:call-template> 
     </fo:instream-foreign-object> 
    </fo:block> 
</xsl:template> 
<xsl:template name="drawchart"> 
    <xsl:param name="percent"/> 
    <xsl:param name="r"/> 
    <xsl:variable name="c" select="2*3.1415926*$r"/> 
    <xsl:variable name="pct" select="((100-number($percent)) div 100)*number($c)"/> 
    <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <circle r="{$r}" cx="100" cy="100" fill="none" stroke="#666" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> 
     <circle id="bar" r="{$r}" cx="100" fill="none" cy="100" stroke="#FF9F1E;" stroke-width="1em" stroke-dasharray="565.48" style="stroke-dashoffset: {$pct}px;"></circle> 
    </svg> 
</xsl:template> 

您在PDF得到这样的输出：

您可以在SVG中添加文本（百分比），根据需要更改颜色，大小和方向/开始。