svg填写不工作iconmonstr社交

时间:2016-07-05 20:55:35

标签: html css svg fill

我已经在这个网站http://iconmonstr.com/上下载了一个svg格式并搜索了pinterest.svg,当我下载文件时,我可以在我的编辑器上打开svg文件并更改它的填充。但是我想要的东西,我可以用不同的颜色悬停它绕过颜色。

我将填充值更改为黑色。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
/*
this is the file of svg format that was downloaded:

this is the downloaded code for pinterest svg:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" ><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg> 
*/

    /* this code right here works it resizes the image svg
    img:hover{
      width:100px;
    }
    */

    /* but this thing doesnt work */
    img:hover{
      fill:red;
    }
    /*i tried 
      svg:hover{fill:red;}
      img svg:hover{fill:red;}

      both of these two doesnt work
    */
  </style>
</head>
<body>
  <img src="iconmonstr-pinterest-1.svg"/>
</body>
</html>

如果有人能解释问题,我会很乐意欣赏它。谢谢你们。

0 个答案:

没有答案