Question

是否有（优雅）方式绘制具有“负”笔触颜色的路径？

我的意思是，如果我在HTML文档中有一些元素（例如<canvas>或<img>，我用<svg>元素覆盖它。我想绘制<svg>元素中的路径。我希望笔触颜色自动为该路径下的任何内容。当然，这意味着路径中每个像素的颜色在经过不同部分时会发生变化。 <img>元素下方的<svg>元素。

Answer 1

您可以使用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

在SVG中绘制具有“负”颜色的路径

1 个答案: