几天以来,我的SVG内部的可点击代码停止在Google Chrome中工作。这很奇怪,我尝试了“一切”,但仍然无法正常工作。这只会在“ Google Chrome浏览器”中发生(我使用的是67和68 beta版)!
通过我的SVG的一半,我无法再单击或选择任何内容。它与导航列表无关(与div标签相同)。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="4984" height="3534" viewBox="0 0 4984 3534">
<svg id="side_1" x="0" y="0" width="2000" height="3534" version="1.1">
<foreignobject x="118" y="348" width="1406" height="2895">
<body xmlns="http://www.w3.org/1999/xhtml">
<nav class="section__list">
<ul>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>test ?</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<a href="#">Can't click this</a>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
<li class="section__block" style="margin-bottom: 30px;">
<table>
<tr>
<td>
<h2>Can't select this</h2>
</td>
</tr>
</table>
</li>
</ul>
</nav>
</body>
</foreignobject>
</svg>
</svg>
谢谢!