html - 如何将一组 SVG 路径附近的所有空间变成可点击的链接,而不仅仅是 SVG 笔画本身?
问题描述
我有几个 svg<path>
元素组合成两个单独的组<g>
元素(ID 是po
和ph
)。两者都在另一个组内,所有内容都在一个<svg>
.
HTML 如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="stripped_back_CSS.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="content" class="hide">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
.st5{fill:none;stroke:red;stroke-miterlimit:10;}
</style>
<g id="page">
<g id="po">
<path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
<path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
</g>
<g id="ph">
<path class="st5" d="M392.4,522c0,3.2,0.4,6.6,1.1,9.7c-3.7-3.9-2.3-16.4,4.9-11.3c4.1,2.8-3.3,7.3-6.6,5.5"/>
<path class="st5" d="M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3"/>
<path class="st5" d="M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1"/>
<path class="st5" d="M403.9,525.3c1.8-0.8,4-1.9,6-2.2"/>
</g>
</g>
</svg>
</div>
</div>
</body>
</html>
和这样的CSS文件:
#content {
text-align: center
}
#content svg {
background: #fff;
width: auto;
height: 152vh;
margin: 8vh 0 8vh 0;
box-shadow: -9px -9px 20px 0 rgba(0, 0, 0, .12);
max-width: 90%
}
这会产生以下 svg 字符:
我想将这些文本组中的每一个都变成一个可点击的链接。但是,如果我尝试简单地用<a></a>
标签包围组标签,那么文本笔画确实是可点击的,但笔画之间的空间不是。例如,如果光标悬停在字母“O”内,则在该位置没有可点击的内容。如何使每组字符的“一般区域”可点击?
谢谢!
解决方案
最简单的方法之一是<rect />
在你的<g>
. 您可以将opacity
其设为 0,然后将所有<path>
. 您可以将<rect />
高度和宽度设置为您想要点击/任何鼠标事件的区域。
<g id="po">
<rect x="" y="" width="" height="" style="fill-opacity:0; stroke-opacity:0" />
<path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
<path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
</g>
推荐阅读
- python - 在 python 的 re.search 中一起使用 AND & OR 运算符?
- excel - DTPicker 属性无法正确设置自定义日期格式
- javascript - 如果 window.onload 不是当前选项卡,为什么它不会触发?
- ios - 如何在 iOS13 上的 iPad 上呈现 iPhone 风格的 actionSheet?
- django - 运行 collectstatic 后 Django 如何存储它的 staicfiles?
- c# - 如果我在 c# 中没有任何要连接或附加的字符串,哪个更适合用于性能 String 或 StringBuilder?
- c++ - 为什么一个类中可以使用多个标准向量?
- gcc - 如何使用 gcc 或 g++ 安装和运行 gupnp
- angular - 字符串在 html 中显示正常,但在使用 console.log 时在控制台中变得未定义
- spring-boot - Objectmapper writeValueAsString 抛出 OOM 异常