原因
想要给文字添加点击效果,但是和图里的一样,"-"的'受力面积'太小了,导致只能对准点击才有效,不太友好
目标
点击圆框内任何地方都能触发文字的点击事件
前提
所有线条都是通过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);
},
![图片.png 图片.png](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
![图片.png 图片.png](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…