Question

我有一张国家/地区的地图（SVG），当我将鼠标悬停在一个省/州上时，想要更改其颜色/填充，我想突出显示一个省/州。我实现了这一点，但问题是onMouseEnter突出显示了整个地图，而不仅仅是我选择的状态。我想做的是传递州/省的ID，以便仅突出显示该州。如何将其添加到此或其他位置：

onMouseEnter={() => setColor("yellow")}

功能组件：

function ColorOnHover() {
const [color, setColor] = useState("#FFF8DC");
return (
<svg>
   <polygon
        id="Paris"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        onMouseEnter={() => setColor("yellow")}
        onMouseOut={() => setColor("#FFF8DC")}
        stroke-miterlimit="10"
        points="1494.844,491.41 ...  />

 <polygon
        id="Azur"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        stroke-miterlimit="10"
        points="638.381,931.285 .../>
  </svg>

  )

Answer 1

css解决方案： 1.将类别属性添加到svg

<svg className="country" ...>

创建和导入CSS文件

svg.country>多边形{填充：＃FFF8DC; } svg.country>多边形：悬停{填充：黄色； }

Answer 2

如果您没有专门针对该国首都的多边形，则无需突出显示。请提供更具体的示例。

此外，您也可以使用纯CSS解决此问题：只需将一个类分配给所有需要突出显示的多边形，然后将：hover样式添加到该类即可以您想要的方式突出显示多边形。

...

UPD：然后，您可以尝试使用setState保存省的ID，并根据当前的selectedId在多边形标记中设置fill属性，如下所示：

const [selectedId, setSelectedId] = useState(null)

...

<polygon
  id="Paris"
  fill={selectedId === 'Paris" ? 'yellow' : ''}
  onMouseEnter={() => setSelectedId('Paris')}
  onMouseOut={() => setSelectedId(null)}
  ...
/>

有点明显，但是您可以从类似的内容开始。

您还应该尝试使用纯CSS解决方案：

.highlightable:hover {
  fill: yellow;
}

<polygon
  id="Paris"
  class="highlightable"
 />

Answer 3

创建一个基本上设置颜色的变量，并将其传递到多边形组件中。另外，使用onMouseLeave（）代替onMouseOut（）。

....
const [color, setColor] = useState("#FFF8DC");

const styles = {
 color: color
};

<polygon
  id="Paris"  
  style={styles}
  onMouseEnter={() => setColor("yellow")}
  onMouseLeave={() => setColor("#FFF8DC")}
  ... 
/>

）

反应useState更改颜色不起作用

3 个答案: