How to change color of SVG image using CSS (jQuery SVG image replacement)?

后端 未结 17 1967
死守一世寂寞
死守一世寂寞 2020-11-21 17:36

This is a self Q&A of a handy piece of code I came up with.

Currently, there isn\'t an easy way to embed an SVG image and then have access to the SVG elements vi

17条回答
  •  情话喂你
    2020-11-21 18:07

    If you can include files (PHP include or include via your CMS of choice) in your page, you can add the SVG code and include it into your page. This works the same as pasting the SVG source into the page, but makes the page markup cleaner.

    The benefit is that you can target parts of your SVG via CSS for hover -- no javascript required.

    http://codepen.io/chriscoyier/pen/evcBu

    You just have to use a CSS rule like this:

    #pathidorclass:hover { fill: #303 !important; }
    

    Note that the !important bit is necessary to override the fill color.

提交回复
热议问题