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>

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

Hover event on lineargradient colors in svg

html

svg

hover

mousehover

d3.js