我有一些按钮图像,保存为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中。
答案 0 :(得分:0)
您可以在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);
}
答案 1 :(得分:0)
您可以将它们存储在服务器上并使用以下代码访问它们:
#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;
您可以相应地调整按钮的高度和宽度。