使用 SVG (Vue) 修改 SCSS 中的混合混合模式或过滤行为答案

【问题标题】：Modify mix-blend-mode or filtering behavior in SCSS with an SVG (Vue)使用 SVG (Vue) 修改 SCSS 中的混合混合模式或过滤行为
【发布时间】：2021-06-23 18:51:50
【问题描述】：

我正在处理页面顶部的position: absolute 导航栏，其中包含<a>s 中的一些svg。我需要将 SVG 在浅色 div（其他 Vue 组件）前面时为黑色，在深色 div 前面时为白色。 SVG 后面的 div 可以是深红色、浅蓝色等，生成的 svg 填充只能是白色或黑色。

有没有办法做一种特殊的 SCSS 事情，我可以制作自己的混合混合模式或其他东西？或者使用 SCSS 逻辑的其他一些实现，您可以在其中 filter，然后将生成的颜色在其余部分变为白色或黑色。

例如，经过 100% 过滤的深蓝色会返回较浅的颜色，然后应完全变为白色。

我目前正在通过使用滚动处理程序来实现一种解决方案，该处理程序检查 div 位置、它们各自的背景颜色值，然后根据返回的内容更改 SVG 上的内联样式。我只是希望有一个聪明的 SCSS/CSS 解决方案，而不是更多的 JavaScript。

【问题讨论】：

标签： css vue.js sass responsive mix-blend-mode

【解决方案1】：

如果你在svg代码中定义fill或stroke值为currentColor并使用svg作为组件，你可以通过给color值得到任何你想要的在 css 中转换成 svg。

function svgOnClick() {
  document.querySelector("svg").classList.add('blue');
}

svg {
  color: #e74c3c;
}

.blue {
  color: #3498db;
}

<svg onclick="svgOnClick()" height="210" width="400">
  <path fill="currentColor" d="M150 0 L75 200 L225 200 Z" />
</svg>

【讨论】：