SVG图像作为一种矢量图像，在很多Web设计中被广泛应用。在很多情况下，需要对SVG图像进行点击事件的绑定。通常情况下，对一个普通的HTML元素，绑定一个点击事件是非常容易的，只需要使用`onclick`属性或是jQuery等JS库中的函数即可。但是，对于SVG图像，需要采用不同的方式绑定事件，因为SVG图像内部是可选的文本和形状组成的，通过CSS可以添加样式，但无法直接绑定事件，因此需要通过JS代码实现。
本文将介绍如何实现使用CSS只能点击SVG图像的边缘。
1. 使用`pointer-events`属性
CSS3中提供了一个`pointer-events`属性，它的作用是控制HTML元素是否响应鼠标事件。将该属性设置为`none`时，对应的HTML元素就不会响应任何鼠标事件。当将该属性设置为`auto`时，对应的HTML元素将恢复之前的行为。但是，当将该属性设置为`visible`时，则只有当指针在元素的非透明部分上面时才会产生效果，透明部分不会响应事件。
因此，我们可以对SVG图形设置该属性为`visible`，这样只有在指针在SVG图形非透明部分时才会产生事件。
svg{
pointer-events: visible;
}
但是，这样会有一个问题，就是当SVG图形非常复杂时，事件响应区域会非常不准确，这就需要采用更加精细的方法。
2. 使用`getBoundingClientRect()`方法
`getBoundingClientRect()`方法是DOM元素的一个方法，该方法返回元素的大小及其相对于视口的位置。可以通过该方法获取SVG图形的位置和大小，进一步判断鼠标是否在SVG图形的边缘上。
let svg = document.querySelector('svg');
let svgRect = svg.getBoundingClientRect();
svg.addEventListener('click', function(e){
let x = e.clientX - svgRect.left;
let y = e.clientY - svgRect.top;
if(x<=5 || x>=svgRect.width-5 || y<=5 || y>=svgRect.height-5){
console.log('点击了SVG图形的边缘');
}
});
在以上代码中，我们首先获取了SVG图形的位置和大小，然后给SVG图形添加了一个点击事件监听器。当点击事件触发时，我们根据鼠标的位置计算出鼠标距离SVG图形左上角的位置，并进行判断。在此处，我们将鼠标在SVG图形上方5px以内的部分定义为SVG图形的边缘区域。如果鼠标在SVG图形的边缘区域内，就可以认为点击了SVG图形的边缘了。
3. 结论
在本文中，我们学习了如何使用CSS只能点击SVG图像的边缘。我们首先了解了`pointer-events`属性的作用和使用方法，然后介绍了`getBoundingClientRect()`方法的使用。这两种方法结合起来，可以实现较为完善的SVG图形边缘点击事件绑定。