我有一些按钮图像,保存为 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 中。
最佳答案
您可以将外部 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>
关于javascript - 使用 svg 图像作为按钮 - 但不将它们直接包含在 HTML 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41006442/