Рисование пути с «отрицательным» цветом в SVG

Есть ли (элегантный) способ рисовать дорожку с «негативным» цветом штриха?Рисование пути с «отрицательным» цветом в SVG

То, что я имею в виду, если у меня есть какой-то элемент в HTML-документ (например, <canvas> или <img>, и я покрой его с <svg> элементом. И я хочу, чтобы нарисовать путь в этом <svg> элемент. Я хочу, чтобы ход цвет автоматически негативом то, что находится в этом пути. Конечно, это означает, что цвет каждого пикселя на пути изменения, как она проходит через различные части <img> элемента на нижней стороне <svg> элемента.

источник

2017-02-22 Kal

ли вы имеете в виду, как это? http://jsdo.it/defghi1977/8JKE – defghi1977

@ defghi1977 В значительной степени. Но я вижу, что в вашем CSS «mix-blend-mode» применяется ко всему элементу SVG. Интересно, могу ли я расширить селектор, поэтому он применим только к подмножеству путей, которые я рисую. – Kal

@ defghi1977 Я просто разветвил ваш пример. Действительно, можно сделать режим mix-blend-mode применимым к подмножеству путей: http://jsdo.it/ksze/GTUN – Kal

Вы можете использовать mix-blend-mode:difference свойство рисовать путь инвертированными цветами обратных элементов (img, canvas и т. д.), например:

HTML

<div class="wrapper"> 
<img src="http://jsrun.it/assets/G/H/X/X/GHXXX.png"> 
<svg width="500px" height="500px"> 
    <path d="M50,50l400,400" stroke-width="100" stroke="#fff"/> 
</svg> 
</div>

CSS

.wrapper{ 
    position:relative; 
} 
.wrapper *{ 
    position:absolute; 
} 
.wrapper path{ 
    mix-blend-mode:difference; 
}

http://jsdo.it/defghi1977/8JKE

источник

2017-02-22 09:32:57 defghi1977

Рисование пути с «отрицательным» цветом в SVG

ответ

Смежные вопросы