How to change svg color with css

In CSS, you can use the stroke attribute to change the color of svg. You only need to set the "stroke: color value" style for the polyline tag in svg. The stroke attribute defines a line, text or element outline color, the value is the same as color, and supports rgba transparent channel.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Sometimes we may use css to directly control svg. svg can be used in the form of images like jpg and png, or directly in the form of tags. The former cannot set the color, but the latter can.

Example:

<svg width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 8 Copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <polyline id="Rectangle-8-Copy-10" stroke="#8F99AE" stroke-width="2" transform="translate(2.242641, 6.242641) scale(1, -1) rotate(-135.000000) translate(-2.242641, -6.242641) " points="5.24264069 9.24264069 -0.757359313 9.24264069 -0.757359313 3.24264069 -0.757359313 3.24264069"></polyline>
    </g>
</svg>

Effect:

Add the code to change the color

 svg g polyline {
    stroke: red;
}

Effect:

Recommended learning: css video tutorial

The above is the detailed content of How to change svg color with css. For more information, please follow other related articles on the PHP Chinese website!