使用 SVG (Vue)

问题描述

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

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

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

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

解决方法

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

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>