如何使用XSL将XML文件转换为SVG?

前端之家收集整理的这篇文章主要介绍了如何使用XSL将XML文件转换为SVG?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
特定
  1. <root>
  2. <item>
  3. <detail>100</detail>
  4. <detail>200</detail>
  5. </item>
  6. <item>
  7. <detail>50</detail>
  8. <detail>100</detail>
  9. </item>
  10. </root>

我如何将这些数据变成一个简单的SVG条形图? (没有什么花哨,只有四个酒吧代表数字之间的关系)

这样的东西

(我知道这两个项目之间没有分离,但是让我们说我将使它们变成不同的颜色,前两个蓝色的第二个红色)

我想我不知道xsl:模板中的语法将是生成SVG代码?最好的答案被接受!

这里有一个例子,有更多的钟声和口哨:

>它会自动缩放到最大高度
>它使用CSS来设计元素
>它具有用于条的宽度和间距的可配置参数
它使用更多的惯用XSLT,而不仅仅是一堆嵌套的for-each循环

用你的输入这段代码

  1. <xsl:stylesheet
  2. version="1.0"
  3. xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  4. xmlns="http://www.w3.org/2000/svg"
  5. >
  6. <xsl:output indent="yes" cdata-section-elements="style" />
  7.  
  8. <xsl:param name="width" select="40" /><!-- width of bars -->
  9. <xsl:param name="space" select="10" /><!-- space between bars and items -->
  10.  
  11. <xsl:variable name="max-y" select="//detail[not(//detail &gt; .)][1]" />
  12.  
  13. <xsl:template match="root">
  14. <svg>
  15. <defs>
  16. <style type="text/css"><![CDATA[
  17. g.bar text {
  18. font-family: Arial;
  19. text-anchor: middle;
  20. fill: white;
  21. }
  22. g.bar rect {
  23. fill: black;
  24. }
  25. ]]></style>
  26. </defs>
  27. <g transform="translate(10,10)">
  28. <xsl:apply-templates select="item" />
  29. </g>
  30. </svg>
  31. </xsl:template>
  32.  
  33. <xsl:template match="item">
  34. <xsl:variable name="prev-item" select="preceding-sibling::item" />
  35. <g class="item" id="item-{position()}" transform="translate({
  36. count($prev-item/detail) * ($width + $space)
  37. + count($prev-item) * $space
  38. })">
  39. <xsl:apply-templates select="detail" />
  40. </g>
  41. </xsl:template>
  42.  
  43. <xsl:template match="detail">
  44. <xsl:variable name="idx" select="count(preceding-sibling::detail)" />
  45. <xsl:variable name="pos" select="$idx * ($width + $space)" />
  46. <g class="bar">
  47. <rect x="{$pos}" y="{$max-y - .}" height="{.}" width="{$width}" />
  48. <text x="{$pos + $width div 2.0}" y="{$max-y - $space}">
  49. <xsl:value-of select="."/>
  50. </text>
  51. </g>
  52. </xsl:template>
  53. </xsl:stylesheet>

产生

  1. <svg xmlns="http://www.w3.org/2000/svg">
  2. <defs>
  3. <style type="text/css"><![CDATA[
  4. g.bar text {
  5. font-family: Arial;
  6. text-anchor: middle;
  7. fill: white;
  8. }
  9. g.bar rect {
  10. fill: black;
  11. }
  12. ]]></style>
  13. </defs>
  14. <g transform="translate(10,10)">
  15. <g class="item" id="item-1" transform="translate(0)">
  16. <g class="bar">
  17. <rect x="0" y="100" height="100" width="40"/>
  18. <text x="20" y="190">100</text>
  19. </g>
  20. <g class="bar">
  21. <rect x="50" y="0" height="200" width="40"/>
  22. <text x="70" y="190">200</text>
  23. </g>
  24. </g>
  25. <g class="item" id="item-2" transform="translate(110)">
  26. <g class="bar">
  27. <rect x="0" y="150" height="50" width="40"/>
  28. <text x="20" y="190">50</text>
  29. </g>
  30. <g class="bar">
  31. <rect x="50" y="100" height="100" width="40"/>
  32. <text x="70" y="190">100</text>
  33. </g>
  34. </g>
  35. </g>
  36. </svg>

这样做

在我的机器上

猜你在找的XML相关文章