CODEWITHSUNDEEP
javascriptsvg
Alex
Alex

Reputation: 1849

How can I draw "empty" circles as a markers for a line in SVG?

I am trying to draw empty circles as a markers for line in SVG. Problem I am having is that I can see line inside the empty circles. How can I "erase" it? Options I have considered:

  1. Adjust line to be shorter and position markers "outside" of the line. Unfortunately this does not work well for my scenario. I have arbitrary lines as an input(could be any possible path element) and calculating "shorter" lines is quite difficult in general case.
  2. I could create a mask which is basically same line in black and smaller sized markers to be used as "holes". Problem with this is that I would basically have to duplicate all the lines in mask and in case when markers have more complex shape than a circle this also becomes quite complicated.

Is there anything else I could try?

<svg width="200" height="200">
   <marker id="line-start" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible">
      <circle fill="none" stroke="#666" cx="7" cy="7" r="7" />
   </marker>
   <path stroke="#666" marker-start="url(#line-start)" marker-end="url(#line-start)" stroke-width="2" d="M10,100 L 190,100" />
</svg>

Upvotes: 1

Views: 193

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

The easiest thing to do is to add a fill that's the same color as the background. But if you have an image or complex gradient background, then you can do a green-screen replacement. Use a fill on the marker of 100% red (or green or blue - whatever you're not using elsewhere), and then use a filter to select and remove it.

<svg width="200px" height="200px">
  <defs>
 <filter id="empty" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
   <feColorMatrix type="matrix" values="1 0 0 0 0 
                                        0 0 0 0 0 
                                        0 0 0 0 0 
                                        1 -255 -255 1 0"/>
    <feComposite operator="out" in="SourceGraphic"/>
 </filter>
    
  <marker id="line-start" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" >
      <circle stroke="#666" cx="7" cy="7" r="7" fill="red"/>
   </marker>
  </defs>

  

   <path filter="url(#empty)" stroke="#666" marker-start="url(#line-start)" marker-end="url(#line-start)" stroke-width="2" d="M50,100 L 180,100" />

</svg>

Upvotes: 2

Related Questions