progress-radial, linear-gradient in XSL-FO - svg

Question

Is it possible to create a radial progress bar in XSL-fo using SVG or something else?
I have a task to generate a pdf document from an XSL that I write in xsl-fo. Our CSS specialist did the coding for it (but cannot help me with the pdf generation and xsl-fo), but not sure how I could recreate it in xsl-fo, so that the pdf document also has the correct progress bar with the achieved percentage.
This is what I should recreate:
Radial progress bar
Part of his CSS code is:
.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)
}
Thank you

Answer 1

Here's some inspiration to run with. Given this XML:
<charts>
<chart percent="20"/>
<chart percent="40"/>
<chart percent="90"/>
</charts>
And using this simple XSL (I have eliminated all the XSL FO page stuff):
<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>
You get this as output in PDF:
You can add the text (percent) inside the SVG, change colors, sizes and direction/start for the stroke as you like.

Answer 2

If you are using AH Formatter, then you can use linear-gradient(). See https://www.antennahouse.com/product/ahf64/ahf-ext.html#linear-gradient. Otherwise, you may be able to generate what you want as SVG inside an fo:instream-foreign-object.