2017-02-22 3 views
0

"負の"ストロークカラーのパスを描く(エレガントな)方法はありますか?SVGで「負」の色でパスを描く

私は何を意味することは、私がHTML文書内のいくつかの要素(例えば<canvas>または<img>を、持っていると私は<svg>要素とそれをオーバーレイする場合である。そして、私はその<svg>要素にパスを描きたい。私はストロークをしたいです色が自動的にそのパスの下にあるものは何でもの負することができる。もちろん、これは、それが<svg>要素の下<img>素子の異なる部分の上を通過するように経路の各画素の色が変化することを意味する。

+1

を意味していますか? http://jsdo.it/defghi1977/8JKE – defghi1977

+0

@ defghi1977かなり。しかし、あなたのCSSでは、 '混合 - 混合モード'がSVG要素全体に適用されることがわかりました。セレクタを拡張して、描画するパスのサブセットにのみ適用できるのだろうかと思います。 – Kal

+0

@ defghi1977私はちょうどあなたの例をフォークしました。ミックス・ブレンド・モードをパスのサブセットに適用することは本当に可能です:http://jsdo.it/ksze/GTUN – Kal

答えて

2

あなたは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

関連する問題