html - 多边形两侧的 SVG 悬停事件
问题描述
我使用 SVG 多边形创建了一个六边形。现在,我想在六边形的侧面附加悬停事件。下面是我如何创建 SVG 元素。
<svg width="500" height="500" id="svgTry">
<polygon id="polySvg" points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" fill="transparent" stroke="rgb(249, 249, 249)" stroke-width="20" />
</svg>
我试过了
$('#polySvg').on("mouseenter",function(){
this.style['stroke-width'] = 20;
console.log("clicked");
});
$('#polySvg').on("mouseleave",function(){
this.style['stroke-width'] = 30;
console.log("clicked");
});
这是针对整个多边形的。我们可以在六边形的每一边创建相同类型的悬停事件吗?
解决方案
您需要将多边形重新创建为六个独立的边。或者,更准确地说,是十二个独立的边,因为有两种不同的笔画宽度。而且您可能希望它们是梯形的,以说明它们连接处的斜角。
这是假设您不想添加代码来计算出您最接近的多边形的大小,并相应地修改 SVG。这是很多不必要的工作。
更新
有几种方法可以做你想做的事。这是一种可能更简单的方法:
我们为六个边中的每一边创建一个三角形剪切路径。
下面是应用了剪辑路径的六边形。红色三角形显示剪辑路径的位置。
<svg width="500" height="500" id="svgTry">
<defs>
<clipPath id="cp1">
<polygon points="150,150, 150,0, 285,75"/>
</clipPath>
</defs>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0"
fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20"
clip-path="url(#cp1)"/>
<polygon points="150,150, 150,0, 285,75" fill="red" opacity="0.2"/>
</svg>
- 现在,如果我们再创建五个剪切路径 - 一个与其他五个边中的每一个匹配。我们再添加五个六边形副本,每个副本都应用了一个新的剪辑路径。
<svg width="500" height="500" id="svgTry">
<defs>
<clipPath id="cp1">
<polygon points="150,150, 150,0, 285,75"/>
</clipPath>
<clipPath id="cp2">
<polygon points="150,150, 285,75, 285,225"/>
</clipPath>
<clipPath id="cp3">
<polygon points="150,150, 285,225, 150,300"/>
</clipPath>
<clipPath id="cp4">
<polygon points="150,150, 150,300, 15,225"/>
</clipPath>
<clipPath id="cp5">
<polygon points="150,150, 15,225, 15,75"/>
</clipPath>
<clipPath id="cp6">
<polygon points="150,150, 15,75, 150,0"/>
</clipPath>
</defs>
<g id="sides" fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20">
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp1)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp2)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp3)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp4)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp5)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp6)"/>
</g>
</svg>
- 我们现在又有了一个六边形。但是可以使用悬停规则来定位每个边以更改其笔划宽度。
#sides polygon:hover {
stroke-width: 40;
}
<svg width="500" height="500" id="svgTry">
<defs>
<clipPath id="cp1">
<polygon points="150,150, 150,0, 285,75"/>
</clipPath>
<clipPath id="cp2">
<polygon points="150,150, 285,75, 285,225"/>
</clipPath>
<clipPath id="cp3">
<polygon points="150,150, 285,225, 150,300"/>
</clipPath>
<clipPath id="cp4">
<polygon points="150,150, 150,300, 15,225"/>
</clipPath>
<clipPath id="cp5">
<polygon points="150,150, 15,225, 15,75"/>
</clipPath>
<clipPath id="cp6">
<polygon points="150,150, 15,75, 150,0"/>
</clipPath>
</defs>
<g id="sides" fill="transparent" stroke="rgb(49, 249, 249)" stroke-width="20">
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp1)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp2)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp3)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp4)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp5)"/>
<polygon points="150,0 285,75 285,225 150,300 15,225 15,75 150,0" clip-path="url(#cp6)"/>
</g>
</svg>
这接近你想要的吗?
请注意,为简单起见,我使用与六边形相同的坐标构建了剪辑路径。然而,这意味着笔画的外半部分被剪掉了。所以我们只看到了一半。这就是为什么当您悬停时,笔触只会在内部变粗。如果你想解决这个问题,你需要更新剪辑三角形,使它们稍微超出六边形的外侧。
推荐阅读
- html - 使用 React Native 中的两个兄弟在屏幕 Flex Div 上居中对齐
- c# - OmniSharp.MSBuild.ProjectManager 尝试更新未加载的项目:csharp
- c++ - 使用模板化模板进行多重继承
- node.js - Mongoose 通过 id 查找递归嵌套对象
- python-3.x - 为什么kaggle API下载的-f开关不能识别传递给它的文件名作为字符串
- mysql - 如何查找在 Mysql 中执行失败事务的所有语句
- psutil - psutil 和 du 给出不同的输出
- python - 选择在单个模块中对方法进行 BC 重大更改的方法
- docker - docker vscode 操作超时
- tableau-api - 我将我的运行总计除以某个值,但总计不正确