html - SVG 边界框 - 超链接
问题描述
我有许多 SVG 图标,我想在单击它们时充当超链接。
我尝试了几种不同的方法,但结果总是相同的,可点击区域仅限于 SVG path
,或者使用类比,笔触到纸的地方。
因此,一些图标有很大的不可点击区域:
是否可以在图标周围定义一个边界框并使其可点击?例如:
这是我到目前为止所拥有的:
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<html>
<head>
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="svgicons.css">
</head>
<body>
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>
</body>
</html>
解决方案
正如我评论过的,我会在路径之前添加一个透明的矩形。请注意添加的属性pointer-events="all"使其可点击。
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<!--add a transparent rect before the path -->
<rect width="28" height="28" style="fill:none" pointer-events="all"></rect>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>
推荐阅读
- r - 如何在闪亮的多个模块和应用程序中更新进度条?
- javascript - 获取数组中的名称和键名,而不是作为列表输出
- istio - 基于 IP 地址的出口阻塞
- javascript - 在基于 WebRTC 的音频呼叫中刷新页面后管理会话
- html - Datatable.net - 文本对齐:左不起作用
- amazon-web-services - 使用 aws cli 创建新策略时出现语法错误
- reactjs - 在 React 中使用 Eye/EyeSlash 显示/隐藏密码
- c# - C#:如何检测数组中的重复值并以每个重复值只处理一次的方式处理它们?
- javascript - HTML页面中的心电图图
- react-native - DrawerNavigator 在点击每个选项时始终显示标签栏