xml – 使用XSLT创建SVG

前端之家收集整理的这篇文章主要介绍了xml – 使用XSLT创建SVG前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个XML文件,用于存储学校课程的数据.我刚刚开始乱用SVG,因此制作了一个SVG文件来表示每个班级的注册号码.这是我提出的缩小版本:

第一个栏代表在第一堂课注册的25名学生,依此类推.

既然我已经学习了一些基本的XSLT,我想看看我是否可以从下面发布的XML文件提取这些注册号码,而不是仅手动输入数字(就像我创建上面的图像一样),因为那样太容易了那是我遇到麻烦的地方.我相信大部分信息是正确的,但是如果你看一下我下面的XSLT文件,你会看到我将每个矩形的高度设置为15,我想将它乘以注册号(所以第一个栏的高度应该是15 * 25,其中25个是通过XSLT从XML文件提取的.第二个栏应该是15 * 20,因为第二个栏的注册是20,依此类推).我开始很好,我认为我很接近,但在我开始添加模板后,条形图消失了.任何帮助,将不胜感激!

当前的XSLT文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <xsl:stylesheet version="1.0"
  3. xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  4.  
  5. <!-- main template -->
  6. <xsl:template match="/">
  7. <!-- root element is svg and its namespace -->
  8. <svg version="1.0"
  9. xmlns="http://www.w3.org/2000/svg">
  10.  
  11.  
  12. <!-- Vertical red line -->
  13. <line x1="30" y1="35" x2="30" y2="500"
  14. style="stroke:rgb(255,0);stroke-width: 3" />
  15. <!-- Horizontal red line -->
  16. <line x1="30" y1="500" x2="500" y2="500"
  17. style="stroke:rgb(255,0);stroke-width: 3" />
  18.  
  19. <!-- apply templates to display rectangle bars-->
  20. <xsl:apply-templates select="courses/course/enrollment" />
  21. </svg>
  22. </xsl:template>
  23.  
  24. <!-- Rectangle 1 template -->
  25. <xsl:template match="enrollment[1]">
  26. <!-- Blue Rectangle 1 (341-01) -->
  27. <rect x="40" y="{500-@height}" width="30" height="{15*.}"
  28. style="fill:rgb(255,0);stroke-width: 3;stroke:rgb(0,0)" />
  29. </xsl:template>
  30.  
  31. <!-- Rectangle 2 template -->
  32. <xsl:template match="enrollment[2]">
  33. <!-- Blue Rectangle 2 (341-02) -->
  34. <rect x="100" y="{500-@height}" width="30" height="{15*.}"
  35. style="fill:rgb(255,0)" />
  36. </xsl:template>
  37.  
  38. <!-- Rectangle 3 template -->
  39. <xsl:template match="enrollment[3]">
  40. <!-- Blue Rectangle 3 (341-03) -->
  41. <rect x="160" y="{500-@height}" width="30" height="{15*.}"
  42. style="fill:rgb(255,0)" />
  43. </xsl:template>
  44.  
  45. <!-- Rectangle 4 template -->
  46. <xsl:template match="enrollment[4]">
  47. <!-- Blue Rectangle 4 (368-01) -->
  48. <rect x="220" y="{500-@height}" width="30" height="{15*.}"
  49. style="fill:rgb(255,0)" />
  50. </xsl:template>
  51.  
  52. <!-- Rectangle 4 template -->
  53. <xsl:template match="enrollment[4]">
  54. <!-- Blue Rectangle 5 (375-01) -->
  55. <rect x="280" y="{500-@height}" width="30" height="{15*.}"
  56. style="fill:rgb(255,0)" />
  57. </xsl:template>
  58.  
  59. <!-- Rectangle 4 template -->
  60. <xsl:template match="enrollment[4]">
  61. <!-- Blue Rectangle 6 (385-01) -->
  62. <rect x="340" y="{500-@height}" width="30" height="{15*.}"
  63. style="fill:rgb(255,0)" />
  64. </xsl:template>
  65.  
  66. <!-- Rectangle 5 template -->
  67. <xsl:template match="enrollment[5]">
  68. <!-- Blue Rectangle 7 (413-01) -->
  69. <rect x="400" y="{500-@height}" width="30" height="{15*.}"
  70. style="fill:rgb(255,0)" />
  71. </xsl:template>
  72. </xsl:stylesheet>

XML文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <courses>
  3. <course number="3221" credits="4.0">
  4. <title>Physics</title>
  5. <section number="01" delivery="Classroom">
  6. <enrollment>25</enrollment>
  7. <room>EA244</room>
  8. <instructor>
  9. <first>Herman</first>
  10. <last>Johnson</last>
  11. </instructor>
  12. </section>
  13. <section number="02" delivery="Online">
  14. <enrollment>20</enrollment>
  15. <instructor>
  16. <first>Herman</first>
  17. <last>Johnson</last>
  18. </instructor>
  19. <instructor>
  20. <first>Mike</first>
  21. <last>Miller</last>
  22. </instructor>
  23. </section>
  24. <section number="03" delivery="Classroom">
  25. <enrollment>12</enrollment>
  26. <room>SH102</room>
  27. <instructor>
  28. <first>Allison</first>
  29. <last>Sweeney</last>
  30. </instructor>
  31. </section>
  32. </course>
  33. <course number="1318" credits="4.0">
  34. <title>Psychology</title>
  35. <section number="01" delivery="Classroom">
  36. <enrollment>9</enrollment>
  37. <room>AT102</room>
  38. <instructor>
  39. <first>Mike</first>
  40. <last>Miller</last>
  41. </instructor>
  42. <instructor>
  43. <first>Alex</first>
  44. <last>Holmquist</last>
  45. </instructor>
  46. </section>
  47. </course>
  48. <course number="3715" credits="4.0">
  49. <title>Biology</title>
  50. <section number="01" delivery="ITV">
  51. <enrollment>18</enrollment>
  52. <room>EA244</room>
  53. <instructor>
  54. <first>Mike</first>
  55. <last>Miller</last>
  56. </instructor>
  57. </section>
  58. </course>
  59. <course number="3815" credits="3.0">
  60. <title>Calculus</title>
  61. <section number="01" delivery="Classroom">
  62. <enrollment>16</enrollment>
  63. <room>ST108</room>
  64. <instructor>
  65. <first>Herman</first>
  66. <last>Johnson</last>
  67. </instructor>
  68. </section>
  69. </course>
  70. <course number="4113" credits="3.0">
  71. <title>Chemistry</title>
  72. <section number="01" delivery="Online">
  73. <enrollment>20</enrollment>
  74. <instructor>
  75. <first>Mike</first>
  76. <last>Miller</last>
  77. </instructor>
  78. </section>
  79. </course>
  80. </courses>

编辑:

以下是在XSLT转换后SVG代码应该是什么样子:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg xmlns="http://www.w3.org/2000/svg" version="1.0">
  3.  
  4. <line style="stroke:rgb(255,0);stroke-width: 3" y2="500" x2="30" y1="35" x1="30" />
  5. <line style="stroke:rgb(255,0);stroke-width: 3" y2="500" x2="500" y1="500" x1="30" />
  6. <rect style="fill:rgb(255,0)" height="375" width="30" y="125" x="40" />
  7. <rect style="fill:rgb(255,0)" height="300" width="30" y="200" x="100" />
  8. <rect style="fill:rgb(255,0)" height="180" width="30" y="320" x="160" />
  9. <rect style="fill:rgb(255,0)" height="135" width="30" y="365" x="220" />
  10. <rect style="fill:rgb(255,0)" height="270" width="30" y="230" x="280" />
  11. <rect style="fill:rgb(255,0)" height="240" width="30" y="260" x="340" />
  12. <rect style="fill:rgb(255,0)" height="300" width="30" y="200" x="400" />
  13. </svg>

重申一下,每个矩形的高度应该来自任何登记号乘以15(否则矩形条将太短).我也希望它按顺序排列,因此第一个栏应该是第一个登记号码乘以15,最后一个栏位应该是最后一个登记号码乘以15.

让我建议以下为起点:
  1. <xsl:stylesheet version="1.0"
  2. xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  3. xmlns="http://www.w3.org/2000/svg">
  4.  
  5. <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
  6. <xsl:strip-space elements="*"/>
  7.  
  8. <xsl:template match="/">
  9. <svg version="1.0">
  10. <g transform="translate(0 500) scale(1 -1)">
  11. <xsl:apply-templates select="courses/course/section"/>
  12. </g>
  13. </svg>
  14. </xsl:template>
  15.  
  16. <xsl:template match="section">
  17. <rect x="{40 * position()}" width="30" height="{enrollment}"/>
  18. </xsl:template>
  19.  
  20. </xsl:stylesheet>

也可以看看:
Using XSLT and SVG to create bar chart from XML – Scaling Bar Chart

猜你在找的XML相关文章