svg中线性渐变颜色的悬停事件

Question

我有一个 SVG 矩形，它填充了一个具有各种 <stop offset = ..> 的线性渐变，以使其填充不同的颜色。每次我将鼠标悬停在特定颜色上时，我都会尝试显示不同的文本（每种颜色一个文本）。说清楚：

当我将鼠标悬停在矩形中的橙色上时，我希望“橙色”出现。 当我将鼠标悬停在矩形中的红色上时，我希望“红色”出现。

但我不知道如何解决这个问题。有什么办法吗？

这是我的代码：

<svg>
<g class="nodes">
<rect id="13" class="startNode" x="0" y="0" width="100" height="540" freq="1" ref="13"
    style="fill: url("#fill-13"); cursor: pointer; opacity: 1; visibility: visible;">
</rect>
<linearGradient id="fill-13" gradientTransform="rotate(90)">
    <stop offset="0%" style="stop-color:#ffe154; stop-opacity: 1.0"></stop>
    <stop offset="37%" style="stop-color:#ffe154; stop-opacity: 1.0"></stop>
    <stop offset="37%" style="stop-color:#009600; stop-opacity: 1.0"></stop>
    <stop offset="48%" style="stop-color:#009600; stop-opacity: 1.0"></stop>
    <stop offset="48%" style="stop-color:#ff54ff; stop-opacity: 1.0"></stop>
    <stop offset="49%" style="stop-color:#ff54ff; stop-opacity: 1.0"></stop>
    <stop offset="49%" style="stop-color:#5151ff; stop-opacity: 1.0"></stop>
    <stop offset="55%" style="stop-color:#5151ff; stop-opacity: 1.0"></stop>
    <stop offset="55%" style="stop-color:#ff0000; stop-opacity: 1.0"></stop>
    <stop offset="67%" style="stop-color:#ff0000; stop-opacity: 1.0"></stop>
    <stop offset="67%" style="stop-color:#59bdff; stop-opacity: 1.0"></stop>
    <stop offset="100%" style="stop-color:#59bdff; stop-opacity: 1.0"></stop>
</linearGradient>

Answer 1

正如我所评论的：使用多个矩形，每个矩形具有不同的填充颜色，而不是使用一个具有线性渐变的矩形。

let svg = document.querySelector("svg")
svg.addEventListener("mouseover",(e)=>{
  output.innerHTML = e.target.getAttribute("class")
})

svg{border:solid}

<p id="output">color</p>
<svg viewBox="0 0 100 540" width="50">
  <g class="nodes">
    <rect width="100"  height="37%"
fill="#ffe154" class="yellow"/>
    <rect width="100" y="37%"  height="11%"
fill="#009600" class="green"/>
    <rect width="100" y="48%"  height="1%"
fill="#ff54ff" class="purple"/>
    <rect width="100" y="49%"  height="6%"
fill="#5151ff" class="blue"/>
    <rect width="100" y="55%"  height="12%"
fill="#ff0000" class="red"/>
    <rect width="100" y="67%"  height="33%"
fill="#59bdff" class="skyblue"/>
  </g>
</svg>