龙空技术网

svg为base64 数据场景下 前端改颜色

isV1 57

前言:

此时姐妹们对“element表格表头颜色”大致比较重视,咱们都想要剖析一些“element表格表头颜色”的相关资讯。那么小编也在网摘上网罗了一些关于“element表格表头颜色””的相关知识,希望大家能喜欢,姐妹们快快来学习一下吧!

base64 形式的svg 改颜 色

在实际工作中,有可能会把SVG 当成文件上传到数据库中保存, 传给前台 是Base64码。 直接用img 使用base64 ,无法变换svg颜色。

本例,提供了一种更改颜色的方案 。 用原生base解码工具,解码出svg 的xml字符串,然后更改SVG 的属性值实现。

 <!DOCTYPE html> <html> <head> 	<title>aa</title> </head>    <body>	<div> 	aaa	<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IiYjMjMxOyYjMTg5OyYjMTc0OyYjMjMxOyYjMTc0OyYjMTYxOzIiPgo8ZyBpZD0iR3JvdXAgMTAiPgo8cGF0aCBpZD0iRWxsaXBzZSAzIiBkPSJNMTQgOEMxNCAxMC42MjI0IDExLjQ2MzkgMTMgOCAxM0M0LjUzNjEyIDEzIDIgMTAuNjIyNCAyIDhDMiA1LjM3NzY0IDQuNTM2MTIgMyA4IDNDMTEuNDYzOSAzIDE0IDUuMzc3NjQgMTQgOFoiIHN0cm9rZT0iIzY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxnIGlkPSJHcm91cCA3Ij4KPHBhdGggaWQ9IlZlY3RvciAxNCIgZD0iTTEuMDcwMzYgMS4wNzA4TDE0LjkyOTYgMTQuOTMwMSIgc3Ryb2tlPSIjNjY2NjY2IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9nPgo8L2c+CjwvZz4KPC9zdmc+Cg=="></img>	</div>                  </body>  <script >    	function CreateDOM(str) {		var dom, tmp = document.createElement('div');		tmp.innerHTML = str;		dom = tmp.children[0];		return dom;	}	var aa ="PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IiYjMjMxOyYjMTg5OyYjMTc0OyYjMjMxOyYjMTc0OyYjMTYxOzIiPgo8ZyBpZD0iR3JvdXAgMTAiPgo8cGF0aCBpZD0iRWxsaXBzZSAzIiBkPSJNMTQgOEMxNCAxMC42MjI0IDExLjQ2MzkgMTMgOCAxM0M0LjUzNjEyIDEzIDIgMTAuNjIyNCAyIDhDMiA1LjM3NzY0IDQuNTM2MTIgMyA4IDNDMTEuNDYzOSAzIDE0IDUuMzc3NjQgMTQgOFoiIHN0cm9rZT0iIzY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxnIGlkPSJHcm91cCA3Ij4KPHBhdGggaWQ9IlZlY3RvciAxNCIgZD0iTTEuMDcwMzYgMS4wNzA4TDE0LjkyOTYgMTQuOTMwMSIgc3Ryb2tlPSIjNjY2NjY2IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9nPgo8L2c+CjwvZz4KPC9zdmc+Cg==";	var svgStr = window.atob(aa); 	console.log(svgStr);	var dom = CreateDOM(svgStr);	document.body.appendChild(dom);	let svg = document.querySelector('svg');    svg.setAttribute( "style", "fill:red;" ); </script> </html>

当地时间2015年1月27日报道(具体拍摄时间不详),来自美国斯科茨代尔20岁的金发美女Sierra

标签: #element表格表头颜色