github图片
https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579怎么获取像上面的图片风格的按钮？
我访问https://camo.githubusercontent.com/给我整出来个404 这种图片风格的按钮是通过使用SVG（可缩放矢量图形）来实现的。SVG是一种基于XML的图像格式，可以在不失真的情况下缩放。要使用这种图片风格的按钮，您可以使用以下步骤：
1. 在您的HTML文件中添加一个SVG元素。例如：
<svg width="200" height="50">
<rect x="0" y="0" width="200" height="50" rx="25" ry="25" style="fill:#E6B22D;stroke-width:2;stroke:#E6B22D" />
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="#FFFFFF">按钮</text>
</svg>
在这个例子中，我们使用 <rect> 元素创建一个矩形，使用 rx 和 ry 属性来设置矩形的圆角半径，使用 fill 属性来设置矩形的填充颜色，使用 stroke-width 和 stroke 属性来设置矩形的边框颜色和宽度。我们还使用 <text> 元素添加了一个文本标签，用于在按钮上显示文本。
2. 您可以使用CSS样式来自定义SVG元素。例如：
svg {
cursor: pointer;
transition: all 0.2s ease-in-out;
}
svg:hover rect {
fill: #F5A623;
stroke: #F5A623;
}
svg:hover text {
fill: #FFFFFF;
}
在这个例子中，我们使用CSS样式来设置鼠标指针的样式，并添加了一个过渡效果。我们还使用 :hover 伪类来设置鼠标悬停时的样式。
请注意，您需要将SVG代码嵌入到HTML文件中或将其作为单独的文件引用，而不是使用图像URL来获取SVG。 https://www.runoob.com/svg/svg-inhtml.html 歌者文明清理员 发表于 2023-10-4 23:15
https://www.runoob.com/svg/svg-inhtml.html
额我知道怎么插入，我要的是这个svg 可以使用DataURI作为你的图形资源
/**
* 创建 时间展示 svg内容
* @param {Date} date
* @returns {string} 返回svg内容
*/
function create_SVG__DateView(date){
var date_str=`${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
// 此处svg内容源自提问中的链接 : https://camo.githubusercontent.com/38addf36de1adf564c9a5ac099668238564ce3065487df2aa3491356ef040a22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2545362539422542342545362539362542302545362539372542362545392539372542342d323032332545352542392542343325453625394325383832332545362539372541352d6c6967687467726579
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="更新时间: ${date_str}"><title>更新时间: ${date_str}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="55" height="20" fill="#555"/><rect x="55" width="91" height="20" fill="#9f9f9f"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="285" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">更新时间</text><text x="285" y="140" transform="scale(.1)" fill="#fff" textLength="450">更新时间</text><text aria-hidden="true" x="995" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="810">${date_str}</text><text x="995" y="140" transform="scale(.1)" fill="#fff" textLength="810">${date_str}</text></g></svg>`;
}
// 字符串转base64
function b64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%({2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
/** 创建 data URI
* @param {string} head 文件类型头
* @param {string} data 原文数据
*/
function create_DataURI(head,data){ return `data:${head};base64,`+b64EncodeUnicode(data); }
// svg文件的DataURI头为"image/svg+xml"
console.log(create_DataURI("image/svg+xml", create_SVG__DateView(new Date(Date.now()))));
最后console.log中输出的就是可用的svg的DataURI Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源
最后console.log中输出的就是可用的svg的DataURI
这是我刚才执行这段代码后得到的输出, 直接可以当成svg资源使用
data:image/svg+xml;base64,JTNDc3ZnJTIweG1sbnM9JTIyaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmclMjIlMjB4bWxuczp4bGluaz0lMjJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJTIyJTIwd2lkdGg9JTIyMTQ2JTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwcm9sZT0lMjJpbWclMjIlMjBhcmlhLWxhYmVsPSUyMiVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNDolMjAyMDIzJUU1JUI5JUI0MyVFNiU5QyU4ODIzJUU2JTk3JUE1JTIyJTNFJTNDdGl0bGUlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQ6JTIwMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90aXRsZSUzRSUzQ2xpbmVhckdyYWRpZW50JTIwaWQ9JTIycyUyMiUyMHgyPSUyMjAlMjIlMjB5Mj0lMjIxMDAlMjUlMjIlM0UlM0NzdG9wJTIwb2Zmc2V0PSUyMjAlMjIlMjBzdG9wLWNvbG9yPSUyMiNiYmIlMjIlMjBzdG9wLW9wYWNpdHk9JTIyLjElMjIvJTNFJTNDc3RvcCUyMG9mZnNldD0lMjIxJTIyJTIwc3RvcC1vcGFjaXR5PSUyMi4xJTIyLyUzRSUzQy9saW5lYXJHcmFkaWVudCUzRSUzQ2NsaXBQYXRoJTIwaWQ9JTIyciUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjByeD0lMjIzJTIyJTIwZmlsbD0lMjIjZmZmJTIyLyUzRSUzQy9jbGlwUGF0aCUzRSUzQ2clMjBjbGlwLXBhdGg9JTIydXJsKCNyKSUyMiUzRSUzQ3JlY3QlMjB3aWR0aD0lMjI1NSUyMiUyMGhlaWdodD0lMjIyMCUyMiUyMGZpbGw9JTIyIzU1NSUyMi8lM0UlM0NyZWN0JTIweD0lMjI1NSUyMiUyMHdpZHRoPSUyMjkxJTIyJTIwaGVpZ2h0PSUyMjIwJTIyJTIwZmlsbD0lMjIjOWY5ZjlmJTIyLyUzRSUzQ3JlY3QlMjB3aWR0aD0lMjIxNDYlMjIlMjBoZWlnaHQ9JTIyMjAlMjIlMjBmaWxsPSUyMnVybCgjcyklMjIvJTNFJTNDL2clM0UlM0NnJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dC1hbmNob3I9JTIybWlkZGxlJTIyJTIwZm9udC1mYW1pbHk9JTIyVmVyZGFuYSxHZW5ldmEsRGVqYVZ1JTIwU2FucyxzYW5zLXNlcmlmJTIyJTIwdGV4dC1yZW5kZXJpbmc9JTIyZ2VvbWV0cmljUHJlY2lzaW9uJTIyJTIwZm9udC1zaXplPSUyMjExMCUyMiUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjIyODUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjQ1MCUyMiUzRSVFNiU5QiVCNCVFNiU5NiVCMCVFNiU5NyVCNiVFOSU5NyVCNCUzQy90ZXh0JTNFJTNDdGV4dCUyMHg9JTIyMjg1JTIyJTIweT0lMjIxNDAlMjIlMjB0cmFuc2Zvcm09JTIyc2NhbGUoLjEpJTIyJTIwZmlsbD0lMjIjZmZmJTIyJTIwdGV4dExlbmd0aD0lMjI0NTAlMjIlM0UlRTYlOUIlQjQlRTYlOTYlQjAlRTYlOTclQjYlRTklOTclQjQlM0MvdGV4dCUzRSUzQ3RleHQlMjBhcmlhLWhpZGRlbj0lMjJ0cnVlJTIyJTIweD0lMjI5OTUlMjIlMjB5PSUyMjE1MCUyMiUyMGZpbGw9JTIyIzAxMDEwMSUyMiUyMGZpbGwtb3BhY2l0eT0lMjIuMyUyMiUyMHRyYW5zZm9ybT0lMjJzY2FsZSguMSklMjIlMjB0ZXh0TGVuZ3RoPSUyMjgxMCUyMiUzRTIwMjMlRTUlQjklQjQzJUU2JTlDJTg4MjMlRTYlOTclQTUlM0MvdGV4dCUzRSUzQ3RleHQlMjB4PSUyMjk5NSUyMiUyMHk9JTIyMTQwJTIyJTIwdHJhbnNmb3JtPSUyMnNjYWxlKC4xKSUyMiUyMGZpbGw9JTIyI2ZmZiUyMiUyMHRleHRMZW5ndGg9JTIyODEwJTIyJTNFMjAyMyVFNSVCOSVCNDMlRTYlOUMlODgyMyVFNiU5NyVBNSUzQy90ZXh0JTNFJTNDL2clM0UlM0Mvc3ZnJTNF Darth_EF 发表于 2023-10-21 15:39
可以使用DataURI作为你的图形资源
最后console.log中输出的就是可用的svg的DataURI
??? 琅琊王朝 发表于 2023-10-21 15:43
???
? Darth_EF 发表于 2023-10-21 15:47
?
看不懂
我太弱了 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 140px;
height: 20px;
}
</style>
</head>
<body>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
alt="">
</body>
</html> TKXZ 发表于 2023-10-21 17:40
将svg转为base64格式,而不是链接，我设置了img宽度高度， 这个你可以自己设定其他值， 代码直接可以使用 TKXZ 发表于 2023-10-21 17:42
将svg转为base64格式,而不是链接，我设置了img宽度高度， 这个你可以自己设定其他值， 代码直接可以使用
怎么填写内容？ 琅琊王朝 发表于 2023-10-21 17:49
怎么填写内容？
运行5楼我那些js代码，然后会输出一段DataURI的连接，然后像10楼那样把DataURI放到img里或者用background-image，就能显示svg内容
https://imgse.com/i/pikC83T
https://imgse.com/i/pikC3CV
https://imgse.com/i/pikCl40 琅琊王朝 发表于 2023-10-21 17:49
怎么填写内容？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: inline-block;
position: relative;
font-size: 12px;
color: #fff;
text-align: center;
}
.box img {
vertical-align: middle;
}
.box .subbox {
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.box .tag {
display: inline-block;
width: 37%;
left: 0;
}
.box .tag__content {
display: inline-block;
width: 63%;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+PHRpdGxlPiA8L3RpdGxlPjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjE0NiIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjIwIiBmaWxsPSIjNTU1Ii8+PHJlY3QgeD0iNTUiIHdpZHRoPSI5MSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzlmOWY5ZiIvPjxyZWN0IHdpZHRoPSIxNDYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMjg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NTAiPjwvdGV4dD48dGV4dCB4PSIyODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjQ1MCI+PC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI5OTUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjgxMCI+PC90ZXh0Pjx0ZXh0IHg9Ijk5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iODEwIj48L3RleHQ+PC9nPjwvc3ZnPg=="
alt="">
<span class="tag subbox">访问时间</span>
<span class="tag__content subbox">2023-10-24</span>
</div>
</body>
</html>
写一些CSS就可以啦
页:
[1]