XSL-FOのprogress-radial、linear-gradient

Question

SVGなどを使用してXSL-foに放射状のプログレスバーを作成できますか？

xsl-foで書いたXSLからpdfドキュメントを生成する作業があります。私たちのCSS専門家はそれをコーディングしましたが（pdf世代とxsl-foを手助けすることはできませんが）、xsl-foでどのように再作成できたかわからないので、pdfドキュメントには達成された正しい進捗バーがありますパーセンテージ。

これは私が作成し直すべきである。彼のCSSコードの Radial progress bar 一部です：あなたはAH Formatterのを使用している場合

.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) 
} 

は、あなたがlinear-gradient()を使用することができ、あなたの

Answer 1

ありがとうございます。 https://www.antennahouse.com/product/ahf64/ahf-ext.html#linear-gradientを参照してください。それ以外の場合は、fo:instream-foreign-objectの中にSVGとして必要なものを生成することができます。

Answer 2

ここにはいくつかのインスピレーションがあります。

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

そして、この単純なXSL（私はすべてのXSL FOページのものを排除しています）を使用して：あなたはPDFで出力としてこれを取得

<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> 

を：

このXMLを考えます

SVG内にテキスト（パーセント）を追加したり、色、サイズ、方向を変更したり、ストロークの開始を好きなようにすることができます。