Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h2>Stroke property example</h2> <svg viewBox="5 5 100 100"> <style> path { fill: none; stroke-width: 3px; marker: url(#diamond); } </style> <path d="M 10,50 v -20 h 40 v -20" stroke="#666" /> <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42" /> <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9" /> <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse"> <circle cx="6" cy="6" r="3" fill="#000" stroke="#ccc" stroke-width="1,5" /> </marker> </svg> </body> </html>