html - 如何在 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 元素 ( xmlns:xlink="http://www.w3.org/1999/xlink" ) 中放置对 xlink 命名空间的引用，我们可以使用像 <a xlink:href="...">...</a> 这样的 anchor 元素。围绕我们希望使其可点击的 svg 图像的任何部分。在这种情况下，只有路径是可点击的，而不是整个 svg View 框，如果我们包裹整个 <svg>...</svg> 就会出现这种情况。在标准 html anchor 元素中。