如何將一組 SVG 路徑附近的所有空間變成可點擊的鏈接，而不僅僅是 SVG 筆划本身？
[英]How to make the all the space near a group of SVG paths into a clickable link, not just the SVG stroke itself?
問題描述
我有幾個 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>標簽包圍組標簽，那么文本筆畫確實是可點擊的，但筆畫之間的空間不是。 例如，如果 cursor 懸停在字母“O”內，則在該 position 處沒有可點擊的內容。 如何使每組字符的“一般區域”可點擊？
謝謝！
2 個解決方案
解決方案1
2 2020-07-13 21:28:54
最簡單的方法之一是在<g>中使用<rect /> > 。 您可以將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>
解決方案2
1 已采納 2020-07-14 15:48:49
只需在要視為單個鏈接的其他元素的頂部或下方添加一個透明矩形。 您可能會發現在頂部（即稍后在 SVG 文件中）導致的問題更少。 見下文。
<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"/>
<a xlink:href="http://www.stackoverflow.com" target="_blank">
<rect x="382" y="461" width="18" height="14" fill="transparent"/>
</a>
</g>
<a>元素可以在<rect>周圍、在<g>周圍或在組的所有子元素周圍。 這並不重要。
#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% }
<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"/> <a xlink:href="http://www.stackoverflow.com""> <rect x="382" y="461" width="18" height="14" fill="transparent"/> </a> </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"/> <a xlink:href="http://www.stackoverflow.com"> <rect x="391" y="517" width="21" height="15" fill="transparent"/> </a> </g> </g> </svg> </div> </div>
如何更改 HTML 中 SVG 中路徑的筆觸顏色和填充顏色？
[英]How to change the stroke color and fill color of just path in SVG in HTML?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.