Closed viktoras-pal closed 1 year ago
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="red-chevron" viewBox="0 0 10 10" refX="5" refY="5" orient="auto" > <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" /> </marker> <marker id="black-arrow" viewBox="0 0 10 10" refX="0" refY="5" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> <marker id="red-circle" viewBox="0 0 10 10" refX="5" refY="5" orient="auto" > <circle fill="red" cx="5" cy="5" r="5" /> </marker> </defs> <line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" /> <text x="20" y="150"> line: marker-mid not applied</text> <polyline points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" /> <text x="250" y="150"> polyline </text> <polygon points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" /> <text x="20" y="390"> polygon: end/start overlap </text> <path d="M250,350 l 25,-25 a15,5 -16 0,1 10,-15 l 20,-5 a15,10 -16 0,1 10,-15 l 20,-5 a15,25 -16 0,1 10,-15 l 20,-5 a15,35 -16 0,1 10,-15 l 20,-5" fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" /> <text x="250" y="390"> path with arc segments </text> </svg>
LunaSVG:
Google Chrome: