self overlapping svg paths

Question

Я хотел бы знать, как выделить (изменить цвет) self overlapping зона пути SVG (или даже полилиния). На самом деле, если я изменяю свойство непрозрачности и обводки пути, то зона самообучения не имеет никакого изменения цвета.
Например, имея следующий путь <path d="M187 240 L188 240 L315 217 L317 217 L330 306 L247 233 L258 226 L292 222 L303 178 L353 165" fill="none" opacity="0.6" stroke-width="14" stroke = "red"/>, перекрывающаяся зона не красно-темная.
Вот что я нашел до сих пор, но не помогает мне в этой проблеме. http://www.svgopen.org/2005/papers/abstractsvgopen/index.html#S2.
благодаря

Answer 1

Мессинга с непрозрачностью не поможет, поскольку путь оказывается за один проход, и это не имеет значения, сколько раз он перекрывает себя. Все, что имеет значение, заключается в том, считается ли пиксель «внутри» штриха пути или нет. Если да, то он получает окончательный цвет линии и непрозрачность.

В целом, по-моему, нет простого простого решения вашей проблемы. Самое близкое, что вы можете получить, - это нарисовать отдельный сегмент отдельно. Таким образом, ваш трюк с непрозрачностью будет выделять перекрытия (используйте stroke-opacity, а не opacity), но соединения между сегментами строк выглядят не очень хорошо. У них будут пробелы, и вы также увидите эффекты перекрытия.

<svg width="500" height="500" fill="none" stroke-opacity="0.6" stroke-width="14" stroke = "red"> 
 
          
 
    <path d="M187 240 L188 240" /> 
 
    <path d="M188 240 L315 217" /> 
 
    <path d="M315 217 L317 217" /> 
 
    <path d="M317 217 L330 306" /> 
 
    <path d="M330 306 L247 233" /> 
 
    <path d="M247 233 L258 226" /> 
 
    <path d="M258 226 L292 222" /> 
 
    <path d="M292 222 L303 178" /> 
 
    <path d="M303 178 L353 165" /> 
 

 
</svg>

Единственное хорошее решение было бы определить перекрытие математически и затем генерировать «перекрытие полигонов» из правильной формы. Это довольно сложный код.

Answer 2

Вот версия, которая работает для вас (хотя это делает линии немного более хрустящими, чем хотелось бы). Требуется то, что предложил Пол, но улучшает его, используя 2-сегментные линии, поэтому соединения строк отображаются правильно, затем он использует фильтр для выбора и перекрашивания областей с высокой непрозрачностью, которые перекрываются. Значения таблиц задаются точно для того, чтобы выбирать только истинное перекрытие и выделять небольшие артефакты перекрытия, возникающие при объединении строк, из-за того, что мы выполняем двойной чертеж. Вероятно, вы могли бы добавить очень небольшое размытие, чтобы «рука против сглаживания» была последней.

<svg width="800px" height="600px" viewBox= "0 0 800 600"> 
 
    <defs> 
 
    <filter id="overlappy"> 
 
    <feComponentTransfer result="overlap"> 
 
     <feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 1"/> 
 
     </feComponentTransfer> 
 
     <feColorMatrix in="overlap" result="solid-blue" type="matrix" values ="0 0 0 0 0 
 
                 0 0 0 0 0 
 
                 0 0 0 0 1 
 
                 0 0 0 4 0"/> 
 
     <feColorMatrix in="SourceGraphic" result="opaque-source" type="matrix" 
 
               values ="1 0 0 0 0 
 
                 0 1 0 0 0 
 
                 0 0 1 0 0 
 
                 0 0 0 4 0"/> 
 
     <feComposite operator="atop" in="solid-blue" in2="opaque-source"/> 
 
     
 
    </filter> 
 
    </defs> 
 
    
 
    <g filter="url(#overlappy)" fill="none" stroke="red" stroke-width="4" stroke-opacity="0.5"> 
 
    <path d="M187 240 L188 240 L315 217" /> 
 
    <path d="M188 240 L315 217 L317 217" /> 
 
    <path d="M315 217 L317 217 L330 306" /> 
 
    <path d="M317 217 L330 306 L247 233"/> 
 
    <path d="M330 306 L247 233 L258 226" /> 
 
    <path d="M247 233 L258 226 L292 222" /> 
 
    <path d="M258 226 L292 222 L303 178" /> 
 
    <path d="M292 222 L303 178 L353 165" /> 
 
    <path d="M303 178 L353 165" /> 
 
    </g> 
 

 
</svg>