网页怎么增加文字的面积呢?

Question

原因

想要给文字添加点击效果,但是和图里的一样,"-"的'受力面积'太小了,导致只能对准点击才有效,不太友好

目标

点击圆框内任何地方都能触发文字的点击事件

前提

所有线条都是通过svg画的, 文字'-'是text标签.
只给text标签绑定,不绑给circle.
有啥办法吗

drawCircle: function (startY, container, tag, hasChild) {
    const self = this;
    const tagMap = self.options.tagMap;
    let svgContainer = container.firstChild;
    if (!hasChild) {
        let newPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
        newPath.setAttribute('stroke', 'black');
        newPath.setAttribute('fill', 'transparent');
        newPath.setAttribute('stroke-width', '1px');
        newPath.setAttribute('d', `M 0 ${startY - container.offsetTop} h 50`)
        svgContainer.appendChild(newPath);
    }
    let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute('stroke', 'black');
    circle.setAttribute('fill', 'white');
    circle.setAttribute('stroke-width', '1px');
    circle.setAttribute('cx', 50);
    circle.setAttribute('cy', startY - container.offsetTop);
    circle.setAttribute('r', '10px');
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.setAttribute('x', 50);
    text.setAttribute('y', startY - container.offsetTop + 5);
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('fill', 'black');
    text.setAttribute('class', 'black');
    text.innerHTML = hasChild ? '-' : tagMap.get(tag).length
 text.addEventListener("click", self.controlVisibilityOfChildren.bind(self, tag))
    svgContainer.appendChild(circle);
    svgContainer.appendChild(text);
},

Answer 1

直接用css的after伪元素就可以，一般封装一个mixin

@mixin extend-click() {
  //扩展点击区域
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
  }
}