Изменение цвета SVG

Question

У меня есть изображение SVG, как этот

circles.svg

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff"> 
    <g fill="none" fill-rule="evenodd"> 
     <g transform="translate(1 1)" stroke-width="2"> 
      <circle stroke-opacity=".5" cx="18" cy="18" r="18"/> 
      <path d="M36 18c0-9.94-8.06-18-18-18"> 
       <animateTransform 
        attributeName="transform" 
        type="rotate" 
        from="0 18 18" 
        to="360 18 18" 
        dur="1s" 
        repeatCount="indefinite"/> 
      </path> 
     </g> 
    </g> 
</svg> 

И использовать его как этот

<img src="circles.svg" width="50" alt=""/> 

Но я не знаю, как изменить цвет

Я пробовал

.color{ 
fill:red; 
} 

<img src="circles.svg" width="50" alt="" class="color"/> 

Но это не работает, я не хочу менять SVG. Я хочу только изменить цвет по html, возможно ли это, чтобы не редактировать первичный SVG?

Answer 1

Попробуйте этот Link

HTML

<div> 
    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff"> 
     <g fill="none" fill-rule="evenodd"> 
      <g transform="translate(1 1)" stroke-width="2"> 
       <circle stroke-opacity=".5" cx="18" cy="18" r="18"/> 
       <path d="M36 18c0-9.94-8.06-18-18-18"> 
        <animateTransform 
         attributeName="transform" 
         type="rotate" 
         from="0 18 18" 
         to="360 18 18" 
         dur="1s" 
         repeatCount="indefinite"/> 
       </path> 
      </g> 
     </g> 
    </svg> 
    </div> 

CSS

div { 
    color: blue; 
} 
div svg { 
    fill: currentColor; 
} 

Answer 2

CSS не распространяется через границы документа. Поскольку ваш SVG находится в другом документе, вы не можете повлиять на его стиль, используя CSS в своем HTML.

Вам понадобится встроить SVG в свой HTML-файл.