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

Question

I am working on a clickable human body svg so visitors can click the part they injured and they will be directed to the corresponding page, there is way too much code for the svg to add here so ill just add the top section:

<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">

The css i am using is very straight forward, all it is doing is highlighting the links as the visitor hovers.

a.svg {
cursor: pointer;
}

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

This works just fine as expected but as soon as i change window size or move to mobile the links are no longer clickable so the hover capabilities are gone.

any help with this would be greatly appreciated

Thank you

Answer 1

Well I don't know what the exact problem is, but it looks like Bootstrap is causing the top padding of the #pricing section to extend over the entire SVG.

A quick fix would be to add the following CSS rule (after loading Bootstrap):

#pricing .container .row:first-child { pointer-events: none; }