удалить встроенный стиль на изображение SVG - PullRequest
Новая
       4

удалить встроенный стиль на изображение SVG

0 голосов
/ 29 октября 2018

У меня есть svg img (домашняя иконка в navbar), и я сократил его код до этого: 

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>

Но при удалении встроенного стиля изображение исчезает, так как оно не отображается на дисплее.

Любая помощь?

Ответы [ 2 ]

0 голосов
/ 29 октября 2018 
<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>
0 голосов
/ 29 октября 2018

Я надеюсь, что это сработает, попробуйте этот код 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...