Why does my circle's marker not appear fully? - svg

Question

source: https://codepen.io/joondoe/pen/yLBMXPX?editors=1100
I would know why my circle fails to appear entirely since there is space place for it to display fully.
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
font-family: 'PT Sans', sans-serif;
padding: 2rem;
}
<h2>Beginning SVG: Drawing paths and marker</h2>
<svg width="1000" height="1000" >
<defs>
<marker
id="circle1" markerWidth="385" markerHeight="359"
refX="15" refY="5"
orient="auto"
>
<circle cx="15" cy="5" r="13" fill="black"/>
<circle cx="15" cy="5" r="12" fill="lightgray"/>
<path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
</marker>
</defs>
<line
x1="100" y1="220" x2="250" y2="200"
stroke="black" stroke-width="5"
marker-end="url(#circle1)"
/>
</svg>

Answer 1

Markers have a rectangular clipping area at the bounds of their tile. That's 0,0 to 385, 359 in your case so you need to draw the marker within that rect.
A circle with a cy="5" and r="13" will render above the y axis and therefore outside the clipping rect.
We can simply translate the marker contents and then move the marker refY to compensate. I've set the markerWidth and markerHeight at more sensible values too as having them too large prevents the browser from optimising marker rendering.
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
font-family: 'PT Sans', sans-serif;
padding: 2rem;
}
<h2>Beginning SVG: Drawing paths and marker</h2>
<svg width="1000" height="1000" viewBox="0 0 2000 2000">
<defs>
<marker
id="circle1" markerWidth="40" markerHeight="40"
refX="15" refY="25"
orient="auto"
>
<g transform="translate(0,20)">
<circle cx="15" cy="5" r="13" fill="black"/>
<circle cx="15" cy="5" r="12" fill="lightgray"/>
<path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
</g>
</marker>
</defs>
<line
x1="100" y1="220" x2="250" y2="200"
stroke="black" stroke-width="5"
marker-end="url(#circle1)"
/>
</svg>