Question

下面的svg代码为background-img.it在css中正常工作

background-image:url('data:image/svg+xml,<svg style="color:white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');

但我想使用jquery进行设置。我尝试但是出了点问题

svgbefore = 'data:image/svg+xml,';
  var svg ='<svg style="color:white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>';
  var combo  = svgbefore + svg;
var ap = '<style>'+
  'select#currencies {'+
   'background-image:url("'+combo+'")'+

  '}';
'</style>';

Answer 1

这有效：

保持你的风格在css：

.mystyle{
background-image:url('data:image/svg+xml,<svg style="color:white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="red" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');
}

使用以下jquery代码：

$("select #currencies").addClass("mystyle");

Answer 2

我非常希望下面有代码。谢谢大家的帮助。

var clr1 = jQuery("select#currencies").css("color");

jQuery("select#currencies").css("background-image","url('data:image/svg+xml,<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"8pxz\" height=\"5px\" viewBox=\"0 0 8 5\" enable-background=\"new 0 0 8 5\" xml:space=\"preserve\"> <path fill=\""+clr1+"\" d=\"M0,0c0,0,3.4,4.4,3.5,4.4C3.7,4.4,7.1,0,7.1,0H0z\"/></svg>')");

svg代码使用jquery追加

2 个答案: