Home >Web Front-end >HTML Tutorial >How to use svg in background-image how to change color

How to use svg in background-image how to change color

一个新手
一个新手Original
2018-05-15 14:22:355038browse

Conclusion

After many tests, I discovered that background-image uses svg and changing the color cannot be done at all.

Analysis

When the svg image is used as background-image, the color setting needs to be inside the svg to take effect . Setting the color style in external CSS is invalid. This can actually be explained from the CSS selector. The CSS selector must select the DOM element, but the svg is made into a background image and is not introduced as an element, so it is not introduced externally. Can't set color.

Example

CSS:

i {
    display: inline-block;
    width: 100px;
    height: 100px;
}.icon-del{
    background-image: url(delete.svg);
}.st0{fill:#EC665E;}.st1{fill:#FFFFFF;}

HTML :

<i class="icon-del"></i>

SVG:

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="-691 693 16 16" style="enable-background:new -691 693 16 16;" xml:space="preserve"><title>删除群成员</title><desc>Created with Sketch.</desc><g id="Page-1">
     <g id="群组名片成员_x28_管理员_x29_" transform="translate(-284.000000, -249.000000)">
          <g id="Group-19">
               <g id="Group-14" transform="translate(20.000000, 120.000000)">
                    <g id="群成员-copy-4" transform="translate(0.000000, 121.000000)">
                         <g id="删除群成员" transform="translate(264.000000, 8.000000)">
                              <g id="Group" transform="translate(2.000000, 2.000000)">
                                   <g id="Oval-9">
                                        <circle class="st0" cx="-685" cy="699" r="6"/>
                                   </g>
                                   <g id="Path-2">
                                        <path class="st1" d="M-681,700h-8c-0.6,0-1-0.4-1-1s0.4-1,1-1h8c0.6,0,1,0.4,1,1S-680.4,700-681,700z"/>
                                   </g>
                              </g>
                         </g>
                    </g>
               </g>
          </g>
     </g></g></svg>

The above is the detailed content of How to use svg in background-image how to change color. 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