在SVG中繪製具有「負」顏色的路徑

是否有一種（優雅的）方式繪製具有「負」筆觸顏色的路徑？在SVG中繪製具有「負」顏色的路徑

我的意思是，如果我有一個HTML文檔中的某些元素（如<canvas>或<img>，和我一起的<svg>元素覆蓋它。我希望在<svg>元素繪製的路徑。我想要的行程顏色自動成爲無論是路徑下的負的。當然，這意味着在其經過所述<svg>元件下方的<img>元件的不同部分的路徑中的每個像素的顏色而變化。

來源

2017-02-22 Kal

你的意思是這樣的嗎？ http://jsdo.it/defghi1977/8JKE – defghi1977

@ defghi1977非常。但是我發現在你的CSS中，'mix-blend-mode'適用於整個SVG元素。我想知道是否可以擴展選擇器，使其僅適用於我繪製的路徑的子集。 – Kal

@ defghi1977我剛分叉你的榜樣。確實有可能將混合混合模式應用於路徑的一個子集：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中繪製具有「負」顏色的路徑

回答

相關問題