Как я могу изменить цвет галочки в этом SVG? - PullRequest
Новая
       41

Как я могу изменить цвет галочки в этом SVG?

0 голосов
/ 13 июня 2018

1) Есть ли способ изменить цвет галочки в этом svg?

2) Почему fill:rgb(71,131,48); работает, а fill:#478530; нет?

3) Если яХотите создать другие символы внутри облака, есть ли инструменты для этого? 

.icon {
	background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}
<svg class="icon"></svg>

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Вам нужно url кодировать символ #

Использовать fill: %23478530

.icon {
  background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23478530;" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}
<svg class="icon"></svg>
0 голосов
/ 13 июня 2018

И идея состоит в том, чтобы использовать другой фон в качестве нижнего слоя: 

.icon {
  background: 
   url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat,
   linear-gradient(red,red)50% 60%/50% 40% no-repeat;
  display:inline-block;
  width:150px;
  height:150px;
}
<svg class="icon"></svg>
<svg class="icon" style="width:100px;height:100px;"></svg>
...