[SOLVED] Making dynamic icons work - 32-point wind rose example

Unfortunately I can’t upload a ZIP archive, hence I had to addthe 32 icons by hand:

  1. windrose-n N

  2. windrose-nbe NbE

  3. windrose-nne NNE

  4. windrose-nebn NEbN

  5. windrose-ne NE

  6. windrose-nebe NEbE

  7. windrose-ene ENE

  8. windrose-ebn EbN

  9. windrose-e E

  10. windrose-ebs EbS

  11. windrose-ese ESE

  12. windrose-sebe SEbE

  13. windrose-se SE

  14. windrose-sebs SEbS

  15. windrose-sse SSE

  16. windrose-sbe SbE

  17. windrose-s S

  18. windrose-sbw SbW

  19. windrose-ssw SSW

  20. windrose-swbs SWbS

  21. windrose-sw SW

  22. windrose-swbw SWbW

  23. windrose-wsw WSW

  24. windrose-wbs WbS

  25. windrose-w W

  26. windrose-wbn WbN

  27. windrose-wnw WNW

  28. windrose-nwbw NWbW

  29. windrose-nw NW

  30. windrose-nwbn NWbN

  31. windrose-nnw NNW

  32. windrose-nbw NbW

As you see, I have 2 different renderings: a more elaborate for the 16 well-known wind directions, and 16 others for the intermediate wind directions.

If you want to use the more elaborate version for all your intermediate wind directions, then you can e.g. start from windrose-se.svg and replace the following rotation code:
transform="rotate(45,200,200)"
with the desired angle (45° = NE). For instance, NEbE = NE (45°) + (360°/32) = 54.25°), yielding:
transform="rotate(54.25,200,200)"

3 Likes