js生成随机颜色的首字svg图片

本文主要是介绍js生成随机颜色的首字svg图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div id="ceshi1" style="width: 55px;"></div>
<script>
function generateSVGFromFirstLetter(text) {// 获取字符串首字母const firstLetter = text.charAt(0).toUpperCase();// 生成随机背景色和字体色const randomBackgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);const randomFontColor = "#" + Math.floor(Math.random()*16777215).toString(16);// 创建SVG字符串模板，使用生成的颜色值const svgTemplate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="background-color: ${randomBackgroundColor}"><style>text {font-family: Arial, sans-serif;font-size: 25px; /* 修改为25px */fill: ${randomFontColor};text-anchor: middle;}</style><text x="50%" y="50%" dy=".3em">${firstLetter}</text></svg>`;// 将SVG字符串序列化为XML字符串const parser = new DOMParser();const svgDoc = parser.parseFromString(svgTemplate, "image/svg+xml");const svgString = new XMLSerializer().serializeToString(svgDoc.documentElement);return svgString;
}// 使用示例
const inputText = "你好";
const svgImage = generateSVGFromFirstLetter(inputText);
document.getElementById("ceshi1").innerHTML = svgImage;
</script>

这篇关于js生成随机颜色的首字svg图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---