CODEWITHSUNDEEP
svg
Diagathe Josué
Diagathe Josué

Reputation: 11976

Why does my circle's marker not appear fully?

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>

Upvotes: 1

Views: 73

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

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>

Upvotes: 1

Related Questions