Set SVG color

Set up svg Color

Code format ：
 <svg xmlns="" viewBox=""><path d=""></path></svg>

Method 1 （ recommend ）：
 svg {
  fill:red;
 }

--------------------------------------------------------------------------------------------------------------------------

Method 2 ：
 1. Create a projection using a filter , And move the projection up 100 Pixels , Set parent element overflow:hidden（ If the child element overflows the parent element area, it will not be visible ）;
 filter: drop-shadow(red 0px -100px);

 2. take svg Host element and projection up 100 Pixels , here svg host Y The axis is offset out of the range of the parent element （ invisible ）, The projected copy element is also moved up 100 Pixels , The coordinates are exactly svg Host location
 transform: translate(0px, 100px);
 

summary ： Method 1: less code , It's easy , And the parent element does not need to be set overflow:hidden.