How to maintain the fixed width and height of the SVG marker when changing the stroke-width of the polyline or line or path. Basically what i need is to fix the marker width and height, it should not grow based on the stroke-width of the element.
Below is my code / Editor
<?xml version="1.0"?><svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker></defs><polyline points="10,90 50,80 90,20" fill="none" stroke="black"
stroke-width="2" marker-end="url(#Triangle)" /></svg>
Set markerUnits="userSpaceOnUse"
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" orient="auto"
markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<polyline points="10,90 50,80 90,20" fill="none" stroke="black"
stroke-width="3" marker-end="url(#Triangle)" />
<polyline points="30,100 70,90 110,30" fill="none" stroke="black"
stroke-width="1" marker-end="url(#Triangle)" />
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With