26. August 2023
A literal edge case
The other day, I was in an <svg>
, trying to make the end of a line into a triangle, like that of a pencil.
I eventually realized that the most elegant way to do it was with a marker definition like this:
<svg width="100%" height="50">
<title>Line with triangular point diagram</title>
<defs>
<marker
id="pencil-point"
viewBox="0 0 10 10"
refX="0"
refY="5"
markerWidth="1"
markerHeight="1"
orient="auto-start-reverse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
</marker>
</defs>
<line
x1="40"
x2="200"
y1="25"
y2="25"
stroke="hsl(35, 80%, 60%)"
stroke-width="20"
marker-start="url(#pencil-point)"
></line>
</svg>
If you just wanted to know how to cut a triangle into the end of a line efficiently, there’s no need to read further. Close the tab immediately.
The rest of this post is about a <clipPath>
mystery that I encountered back when I was trying to do this the wrong way.