Question

我正在研究可点击的人体svg，因此访客可以单击他们受伤的部分，然后将他们定向到相应的页面，因为svg的代码太多，无法在此处添加，所以请添加顶部：

<div class="svg">
<svg inkscape:version="0.92.3 (2405546, 2018-03-11)" 
 sodipodi:docname="bodynew.svg" version="1.1" viewBox="0 0 500 400" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
 <sodipodi:namedview bordercolor="#666666" borderopacity="1" fit-margin- 
 bottom="0" fit-margin-left="0" fit-margin-right="0" fit-margin-top="0" 
 gridtolerance="10" guidetolerance="10" inkscape:current-layer="svg4523" 
 inkscape:cx="260.76197" inkscape:cy="215.76186" inkscape:pageopacity="0" 
 inkscape:pageshadow="2" inkscape:window-height="837" inkscape:window- 
 maximized="1" inkscape:window-width="1440" inkscape:window-x="-8" 
 inkscape:window-y="-8" inkscape:zoom="1.5571096" objecttolerance="10" 
 pagecolor="#ffffff" showgrid="false"/>
 <g>
 <a xlink:href="#0" class="svg" data-Name="shape 1" data-tabindex="0">

我正在使用的CSS非常简单，它所做的只是在访客徘徊时突出显示链接。

a.svg {
cursor: pointer;
}

a.svg:focus {
fill: pink;
stroke: red;
stroke-width: 1;
}
a.svg:hover {
fill: pink;
stroke: red;
stroke-width: 1;
}

这可以按预期工作，但一旦我更改窗口大小或移动到移动设备，链接将不再可单击，因此悬停功能消失了。

对此的任何帮助将不胜感激

谢谢

Answer 1

我不知道确切的问题是什么，但是Bootstrap似乎导致#pricing .container .row:first-child { pointer-events: none; }部分的顶部填充扩展了整个SVG。

一种快速的解决方法是在加载Bootstrap之后添加以下CSS规则：

{{1}}

调整浏览器大小时SVG图片中的链接消失

1 个答案: