CSS 在 svg 元素上的 Cursor: pointer; 不起作用

在本文中，我们将介绍在 SVG 元素上应用 CSS 属性 Cursor: pointer; 时可能出现的问题以及解决办法。

阅读更多：CSS 教程

问题描述

CSS 属性 Cursor: pointer; 通常用于改变鼠标指针形状为手型，以指示该区域是可以点击或交互的。然而，在一些情况下，当我们在 SVG 元素上应用 Cursor: pointer; 时，它可能不起作用，导致鼠标指针形状没有改变。

问题分析

要理解为什么在 SVG 元素上的 Cursor: pointer; 不起作用，我们首先需要了解 SVG 的工作原理以及与普通的 HTML 元素的区别。

SVG，全名为可缩放矢量图形（Scalable Vector Graphics），是一种基于 XML 的图形格式。由于 SVG 是基于矢量的，它的元素是由几何形状和路径组成的，而不是像普通的 HTML 元素一样。因此，CSS 在 SVG 上的应用有些不同。

SVG 元素与 CSS 的关系是通过样式表和元素属性建立的。可以通过内联样式、嵌入样式表或外部样式表来应用 CSS 到 SVG 元素上。然而，并不是所有的 CSS 属性在 SVG 上都能正常工作，其中包括 Cursor: pointer;。

解决方法

虽然在 SVG 元素上直接应用 CSS 属性 Cursor: pointer; 可能无法起作用，但我们可以通过其他方式来实现相同的效果。下面是几种常用的解决方法：

1. 使用 inline SVG

一种解决方法是使用内联 SVG（inline SVG）来替代独立的 SVG 文件。内联 SVG 是将 SVG 代码直接嵌入到 HTML 页面中的一种方式。在内联 SVG 中，我们可以直接在 SVG 元素上应用 CSS 属性，包括 Cursor: pointer;。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="0" y="0" width="100" height="100" style="fill: red; cursor: pointer;" />
</svg>

在上述示例中，我们直接在 rect 元素的 style 属性中添加了 Cursor: pointer;，从而使鼠标指针形状变为手型。

2. 使用 JavaScript

如果我们无法使用内联 SVG，我们可以通过 JavaScript 来实现类似的效果。我们可以通过为 SVG 元素添加事件监听器，当鼠标悬停在该元素上时，改变鼠标指针的形状。

<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="0" y="0" width="100" height="100" style="fill: red;" />
</svg>

<script>
  var svgElement = document.getElementById('mySvg');

  svgElement.addEventListener('mouseover', function() {
    svgElement.style.cursor = 'pointer';
  });

  svgElement.addEventListener('mouseout', function() {
    svgElement.style.cursor = 'default';
  });
</script>

在上述示例中，我们使用 JavaScript 为 SVG 元素添加了两个事件监听器：mouseover 和 mouseout。当鼠标悬停在 SVG 元素上时，我们将其样式的 cursor 属性设置为 pointer，从而改变鼠标指针的形状。当鼠标离开元素时，我们将其样式的 cursor 属性恢复为默认值。

3. 使用 Link 元素

另一种解决方法是使用 Link 元素来加载 SVG 文件，并将 CSS 样式表与 SVG 文件关联起来。通过这种方式，我们可以在 CSS 样式表中直接应用 Cursor: pointer;，并将其作用于 SVG 元素。

<link rel="stylesheet" href="styles.css">

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="0" y="0" width="100" height="100" class="clickable" />
</svg>

.clickable {
  cursor: pointer;
}

在上述示例中，我们将 SVG 文件与外部样式表 styles.css 关联起来，并在样式表中为类名为 clickable 的元素应用 Cursor: pointer;。这样，SVG 元素上的鼠标指针形状将改变为手型。

总结

在本文中，我们介绍了在 SVG 元素上应用 CSS 属性 Cursor: pointer; 不起作用的问题。我们分析了这种问题的原因，并提供了几种解决方法，包括使用内联 SVG、JavaScript 和 Link 元素。通过选择合适的方法，我们可以实现在 SVG 元素上改变鼠标指针形状的效果。尽管在 SVG 上有一些限制，但我们仍然可以通过创造性的方式来解决这些问题，以达到更好的用户体验。