Question

我有一个svg img（导航栏中的主页图标），并将其代码简化为：

body {
background-color: #ccc;
}

.navtsvg {
  float: left;
  fill: white;
  height: 17 px;
  width: 19 px;
}

.fil0 {
  fill: white;
}

<html>
<body>
  <a href='index.php'>
    <svg class='navtsvg' viewBox="0 0 4.47 3.81" <defs>
        <style type="text/css">
         <![CDATA[
          .fil0 {fill:white}
         ]]>
        </style>
       </defs>
         <polygon class="fil0" points="2.23,0 4.47,2 4.14,2.3 2.23,0.59 0.33,2.3 0,2 "/>
         <path class="fil0" d="M3.62 2.25l-1.28 -1.14c-0.06,-0.05 -0.16,-0.05 -0.22,0l-1.27 1.14c-0.06,0.05 -0.11,0.16 -0.11,0.24l0 1.19c0,0.07 0.07,0.13 0.16,0.13l0.85 0 0 -0.76c0,-0.08 0.07,-0.14 0.15,-0.14l0.67 0c0.09,0 0.16,0.06 0.16,0.14l0 0.76 0.85 0c0.08,0 0.15,-0.06 0.15,-0.13l0 -1.19c0,-0.08 -0.05,-0.18 -0.11,-0.24z"/>
      </svg>
  </a>
  </body>
</html>

但是删除内联样式后，图像将消失，因为它不显示。

有帮助吗？

Answer 1

我希望它能起作用，尝试下面的代码

body{background:#ccc;}
.navtsvg{
	    float:left;
	    height:17px;
	    width:19px;
	}

	.fil0{
	    fill:white;
	}

<svg class='navtsvg' viewBox="0 0 4.47 3.81">
   <polygon class="fil0" points="2.23,0 4.47,2 4.14,2.3 2.23,0.59 0.33,2.3 0,2 "/>
   <path class="fil0" d="M3.62 2.25l-1.28 -1.14c-0.06,-0.05 -0.16,-0.05 -0.22,0l-1.27 1.14c-0.06,0.05 -0.11,0.16 -0.11,0.24l0 1.19c0,0.07 0.07,0.13 0.16,0.13l0.85 0 0 -0.76c0,-0.08 0.07,-0.14 0.15,-0.14l0.67 0c0.09,0 0.16,0.06 0.16,0.14l0 0.76 0.85 0c0.08,0 0.15,-0.06 0.15,-0.13l0 -1.19c0,-0.08 -0.05,-0.18 -0.11,-0.24z"/>
</svg>

Answer 2

<a class="navtsvgContainer" href='index.php'>
    <svg class='navtsvg' viewBox="0 0 4.47 3.81"
        <polygon points="2.23,0 4.47,2 4.14,2.3 2.23,0.59 0.33,2.3 0,2 "/>
        <path d="M3.62 2.25l-1.28 -1.14c-0.06,-0.05 -0.16,-0.05 -0.22,0l-1.27 1.14c-0.06,0.05 -0.11,0.16 -0.11,0.24l0 1.19c0,0.07 0.07,0.13 0.16,0.13l0.85 0 0 -0.76c0,-0.08 0.07,-0.14 0.15,-0.14l0.67 0c0.09,0 0.16,0.06 0.16,0.14l0 0.76 0.85 0c0.08,0 0.15,-0.06 0.15,-0.13l0 -1.19c0,-0.08 -0.05,-0.18 -0.11,-0.24z"/>
    </svg>
</a>
<style>
    .navtsvg{
        fill:#ffffff;
        width:100%;
        height:100%;
        display:block;
    }
    .navtsvgContainer{
        width:20px;
        height:20px;
        display:inline-block;
    }
</style>

删除svg图像上的内联样式

2 个答案: