主页 / 问题 / 1605525
Accepted
BlackStar1991
Asked:2025-01-25 05:57:56 +0800 CST2025-01-25 05:57:56 +0800 CST

是否可以为 SVG 元素设置背景相关的颜色？

  • 772

有一些SVG动画，<path>它在白色和黑色背景下沿着屏幕移动。是否可以使用 CSS/SVG，以便当 SVG 元素进入黑色背景时，其颜色变为白色？我认为可以使用mix-blend-mode以某种方式做到这一点但我还没有得到任何足够的结果。也许有人可以给出建议？

这是一个非常简单的例子

body{
  padding: 0;
  background: linear-gradient(90deg, #fff 50%, #00f 50%, #00f);
  display:grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

svg{
  mix-blend-mode: multiply;
}
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 50 L190 50" stroke="black"  fill="none"/>
</svg>

是否可以在不改变 html 的情况下将行的右侧部分变为白色？

css

1 个回答

  1. Best Answer

    需要选择混合模式：mix-blend-mode: difference

    不同之处
    。此模式从基色中减去混合色或从混合色中减去基色，具体取决于哪种颜色具有更高的亮度值。与白色混合会反转基色值，与黑色混合不会引起任何变化。

    body{
  padding: 0;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  display:grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

#rect1, #path1 {
   mix-blend-mode: difference;
  background-color:black;
   }  
 
    <svg id="svg1" width="300" height="120" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red">
    <path id="path1" d="M10 50 L190 50" stroke="white" stroke-width="2" >
                   <!-- Анимация линии -->
    <animateTransform attributeName="transform" type="translate" values="-120;160;-120" begin="0s" dur="3s"
     fill="freeze" repeatCount="indefinite" />
    </path>
                    <!-- Анимация прямоугольника -->
    <rect id="rect1" x="10" y="5" width="50" height="20" fill="white" >
       <animate attributeName="x" begin="1s" dur="6s" values="10;250;10" fill="freeze" repeatCount="indefinite" />
    </rect>
</svg>

    • 4

相关问题