使用Javascript更改CSS中定义的SVG图像的颜色[重复]

Question

我有一个输入框，里面有一个 SVG 圆圈：

input{
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
}

使用 Javascript 如何将圆圈的颜色更改为红色（例如当用户输入非法内容时）？

Answer 1

如果您想将 svg 用作前面提到的 css 背景，则必须有一个单独的带有红色背景 svg 的类，您可以将其换出

<input class="a" onchange="checkValue(event)" type="text" name="a">

function checkValue(event){
  var input = event.target; 
  if(input.value.length<2){
    input.className = "error";
  }else{
    input.className = "";
  }
}

input{
  background:background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' fill="black" /></svg>")  no-repeat;
}

.error{
  background:background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' fill="red" /></svg>")  no-repeat;
}

Answer 2

当我阅读您的描述时， 1) 您需要根据您的功能在 javascript 事件中添加样式[例如在更改或表单提交时您想要验证的地方]

2) 请修复以下 css 中的小改动“fill='#f00'”：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='#f00'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;