javascript - 使用 svg 图像作为按钮 - 但不将它们直接包含在 HTML 中

Question

我有一些按钮图像，保存为 svgs。我现在想将这些图像用作我的 html 网站上的按钮。但是，我不知道如何实现这一点。

图像非常复杂，所以我不希望它们在实际的 HTML 文件中，而是从一个单独的文件中导入它们(我的意思是，我希望它们单独保存为 .svg 文件)。第二个问题(我不知道是不是问题)是按钮是圆的。

我曾考虑通过将按钮作为背景图像包含在 css 中来解决这个问题，或者只是作为我认为提供 onclick 方法的标准图像，但最后一种方法肯定太复杂了，而且使它们成为背景图像似乎也很对我来说违反直觉。我写这篇文章只是为了表明我已经考虑过这个问题，但我不知道。

这是我到目前为止的想法:

<div class="sw-buttons">
                <button id="sw-button-1" />
                </button>

                <button id="sw-button-2" />
                </button>
                ...(more buttons here)
            </div>

我找到了 this , 但这里的 svg 直接包含在 HTML 中。

Answer 1

您可以将外部 svg 包含为 src的 <img />在 <button>...</button> 里面元素:

button, button img {
width: 100px;
height: 100px;
border-radius: 100px;
}

button {
position: relative;
background-color: rgb(255,255,255);
}

button img {
position: absolute;
top: 0;
left: 0;
background-color: rgb(0,0,0);
}

<button type="button">
<img src="/my-svg-button.svg" />
</button>