title: Why does my circle's marker not appear fully?
body: <p>source: <a href="https://codepen.io/joondoe/pen/yLBMXPX?editors=1100" rel="nofollow noreferrer">https://codepen.io/joondoe/pen/yLBMXPX?editors=1100</a></p>
  
  <p>I would know why my circle fails to appear entirely since there is space place for it to display fully.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=PT+Sans');
  body {
   font-family: 'PT Sans', sans-serif;
   padding: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Beginning SVG: Drawing paths and marker&lt;/h2&gt;
  
  &lt;svg width="1000" height="1000" &gt;
    &lt;defs&gt;
      &lt;marker 
         id="circle1" markerWidth="385" markerHeight="359"
         refX="15" refY="5"
         orient="auto"    
      &gt;
        &lt;circle cx="15" cy="5" r="13" fill="black"/&gt;
        &lt;circle cx="15" cy="5" r="12" fill="lightgray"/&gt;
        &lt;path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/&gt;
      &lt;/marker&gt;
    &lt;/defs&gt;
    &lt;line 
          x1="100" y1="220" x2="250" y2="200"
          stroke="black" stroke-width="5"
          marker-end="url(#circle1)"
    /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>