0

我在尝试在我的 SVG 图像中放置可点击链接时遇到问题。我已经阅读了几篇文章，但似乎仍然无法掌握它，如果有人能指导我可能做错了什么以及如何用我的代码解决问题，我将不胜感激，谢谢。我将在下面添加一个片段：

        <div class="apps">

            <svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
                        -6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
                         4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
                

        </div>
4

2 回答 2

0

无需添加指向 svg 的链接，只需将它们包含在锚标记中即可

<a href="somelink.com">
<svg></svg>
</a>
于 2021-08-18T19:27:05.697 回答
0

可以使用xlink命名空间将链接放置在svg元素中，请参阅https://www.w3.org/wiki/SVG_Links。

对于问题中的示例，您可以使用类似这样的内容，

<div class="apps">
        <svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <a xlink:href="http://localhost">
            <path d="M0 0h24v24H0V0z" fill="none" />
            <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
                        -6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
                         4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
            </a>
        </svg>
    </div>

xmlns:xlink="http://www.w3.org/1999/xlink"通过<a xlink:href="...">...</a>在svg 元素（在这种情况下，只有路径是可点击的，而不是整个 svg 视图框，如果我们将整个视图包装<svg>...</svg>在标准的 html 锚元素中。

于 2022-01-27T15:41:04.257 回答