Question

我将使用此示例作为下一个项目的指南：https://parall.ax/examples/svg_map

创建者使用了SVG，其中的活动元素位于PNG图像的上方。我想知道的是，我是否可以包含带有非活动元素或“路径”的SVG？

我希望某些元素在“悬停”或“单击”时不执行任何操作。因此，它们会添加到整体图像中，但不会处于活动状态。

任何帮助将不胜感激。谢谢。

Answer 1

就我个人而言，我不会遵循该示例。创建该文件的人使用了相当复杂的方式来实现这一目标。有很多简单的方法。

例如，这是带有一些CSS的简化的SVG映射。只有具有“ hoverable”类的矩形才具有翻转效果。

很显然，如果要处理点击，则还必须向地图区域添加点击处理程序。

.hoverable:hover {
  fill: blue;
}

<svg width="400" viewBox="0 0 100 100">
  <rect x="50" y="10" width="20" height="20" fill="red"/>
  <rect x="50" y="31" width="30" height="20" fill="orange" class="hoverable"/>
  <rect x="30" y="52" width="55" height="20" fill="gold" class="hoverable"/>
  <rect x="10" y="73" width="30" height="20" fill="indianred"/>
  <rect x="41" y="73" width="30" height="25" fill="darkorange" class="hoverable"/>
</svg>

停用单个SVG路径-HTML

1 个答案: