Блог

Я пытаюсь нарисовать пустые круги в качестве маркеров для строки в SVG. Проблема, с которой я сталкиваюсь, заключается в том, что я вижу строку внутри пустых кругов. Как я могу «стереть» это? Варианты, которые я рассмотрел:

1. Сделайте строку короче и расположите маркеры «снаружи» строки. К сожалению, это плохо работает для моего сценария. У меня есть произвольные строки в качестве входных данных (может быть любой возможный элемент пути), и вычисление «более коротких» строк в общем случае довольно сложно.
2. Я мог бы создать маску, которая в основном представляет собой ту же линию черного цвета и маркеры меньшего размера, которые будут использоваться в качестве «отверстий». Проблема с этим заключается в том, что мне в основном пришлось бы дублировать все линии в маске, и в случае, когда маркеры имеют более сложную форму, чем круг, это также становится довольно сложным.

Есть ли что-нибудь еще, что я мог бы попробовать?

 <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>  

Проще всего добавить заливку того же цвета, что и фон. Но если у вас есть изображение или сложный градиентный фон, вы можете заменить его зеленым экраном. Используйте заливку на маркере 100% красным (или зеленым, или синим — независимо от того, что вы не используете в другом месте), а затем используйте фильтр, чтобы выбрать и удалить его.

 <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>