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

Posted 2023-05-08

【中文标题】svg中线性渐变颜色的悬停事件

【英文标题】：Hover event on lineargradient colors in svg

【发布时间】：2020-11-20 12:08:20

【问题描述】：

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

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

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

这是我的代码：

<svg>
<g class="nodes">
<rect id="13" class="startNode" x="0" y="0"   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>

【问题讨论】：

使用多个矩形，每个矩形具有不同的填充颜色，而不是使用一个具有线性渐变的矩形。

【参考方案1】：

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

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

svgborder:solid

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

【讨论】：

非常感谢！用这种方法解决