Home >Web Front-end >CSS Tutorial >How to change svg color with css

How to change svg color with css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-20 16:07:1924901browse

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.

How to change svg color with css

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:

How to change svg color with css

Add the code to change the color

 svg g polyline {
    stroke: red;
}

Effect:

How to change svg color with css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to set bold in cssNext article:How to set bold in css