use-localRef-marker-01-ref.svg 1.4 KB

1234567891011121314151617181920212223242526272829
  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  2. <title>Reference for marker linked to local-ref URL</title>
  3. <defs>
  4. <marker id="limeCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
  5. <circle cx="5" cy="5" r="2" style="stroke: none; fill:lime;"/>
  6. </marker>
  7. <marker id="blueCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
  8. <circle cx="5" cy="5" r="2" style="stroke: none; fill:blue;"/>
  9. </marker>
  10. <marker id="purpleCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
  11. <circle cx="5" cy="5" r="2" style="stroke: none; fill:purple;"/>
  12. </marker>
  13. </defs>
  14. <style>
  15. path {
  16. stroke: blue;
  17. stroke-width: 2px;
  18. }
  19. </style>
  20. <path d="M20,20 L70,20 L120,20" style="marker-start: url(#limeCircle);"/>
  21. <path d="M20,40 L70,40 L120,40" style="marker-start: url(#blueCircle);"/>
  22. <path d="M20,60 L70,60 L120,60" style="marker-start: url(#blueCircle);"/>
  23. <path d="M20,80 L70,80 L120,80" style="marker-mid: url(#limeCircle);"/>
  24. <path d="M20,100 L70,100 L120,100" style="marker-mid: url(#blueCircle);"/>
  25. <path d="M20,120 L70,120 L120,120" style="marker-mid: url(#blueCircle);"/>
  26. <path d="M20,140 L70,140 L120,140" style="marker-end: url(#limeCircle);"/>
  27. <path d="M20,160 L70,160 L120,160" style="marker-end: url(#blueCircle);"/>
  28. <path d="M20,180 L70,180 L120,180" style="marker-end: url(#blueCircle);"/>
  29. </svg>