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

您可以在src元素中包含外部svg作为<img />的{{1}}：

<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);
}

Answer 2

您可以将它们存储在服务器上并使用以下代码访问它们：

    #sw-button-1:
    background: url(put_the_link_to_your_image_here) no-repeat left top;
    height: auto;
    width: auto;

    #sw-button-2:
    background: url(put_the_link_to_your_image_here) no-repeat left top;
    height: auto;
    width: auto;

您可以相应地调整按钮的高度和宽度。

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

2 个答案: