如何在 SVG 图像文件中添加链接？

Question

我在尝试在 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>

Answer 1

可以使用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>

通过在 svg 元素 ( ) 中放置对 xlink 命名空间的引用，xmlns:xlink="http://www.w3.org/1999/xlink"我们可以使用锚元素，就像<a xlink:href="...">...</a>我们希望使其可点击的 svg 图像的任何部分一样。在这种情况下，只有路径是可点击的，而不是整个 svg 视图框，就像我们将整个 svg 视图框包装<svg>...</svg>在标准 html 锚元素中一样。