@michellie

Отображение SVG в google chrome?

Перекопал все вдоль и поперек, в браузере Гугл хром иконки в SVG то отображаются то нет (если полазить по страницам то около 50% иконок пропадают до обновления кеша страницы), случайным образом, в остальных браузерах все ок, может кто сталкивался с такой проблемой.

если смотреть по коду страницы в браузере, все должно отображаться, но нет.

примерно так все выглядит:
<div class="all-site-wrap">
        <nav class="main-nav" id="main-nav">
            <ul>
                <li class="home">
                    <a href="/"><svg class="icon-nav-home">
                    <use xlink:href="#icon-nav-home"></use></svg> <span>Рейтинги</span></a>
                </li>
                <li class="videos">
                    <a href="/socialnetworks.php"><svg class="icon-nav-video">
                    <use xlink:href="#icon-nav-video"></use></svg> <span>Соцсети</span></a>
                </li>
                <li class="almanac">
                    <a href="/website.php"><svg class="icon-nav-almanac">
                    <use xlink:href="#icon-nav-almanac"></use></svg> <span>Сайт</span></a>
                </li>
                <li class="gallery">
                    <a href="/medianetworks.php"><svg class="icon-nav-gallery">
                    <use xlink:href="#icon-nav-gallery"></use></svg> <span>Медиа</span></a>
                </li>
                <li class="snippets">
                    <a href="/outdoormarketing.php"><svg class="icon-nav-snippets">
                    <use xlink:href="#icon-nav-snippets"></use></svg> <span>Внешняя</span></a>
                </li>
                <li class="shop">
                    <a href="/promotion.php"><svg class="icon-nav-shop" height="26px" width="26px">
                    <use xlink:href="#icon-nav-shop"></use></svg> <span>Промоушн</span></a>
                </li>
                <li class="forums">
                    <a href="/othermarketing.php"><svg class="icon-nav-newsletter">
                    <use xlink:href="#icon-nav-newsletter"></use></svg> <span>Прочее</span></a>
                </li>
                 <li class="newsletter">
                    <a href="/platforms.php"><svg class="icon-nav-forums">
                    <use xlink:href="#icon-nav-forums"></use></svg> <span>Площадки</span></a>
                </li>
                <li class="jobs">
                    <a href="/promo.php"><svg class="icon-nav-jobs">
                    <use xlink:href="#icon-nav-jobs"></use></svg> <span>Персонал</span></a>
                </li>
                <li class="guides">
                    <a href="/stuff.php"><svg class="icon-nav-guide" height="26px" width="26px">
                    <use xlink:href="#icon-nav-guide"></use></svg> <span>Продукция</span></a>
                </li>
                
            </ul>
        </nav><svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
        <symbol id="icon-nav-home" viewbox="0 0 64 64">
          <path d="M30,16 C17.869,16 8,25.869 8,38 C8,50.131 17.869,60 30,60 C42.131,60 52,50.131 52,38 C52,25.869 42.131,16 30,16 L30,16 Z M30,58 C18.972,58 10,49.028 10,38 C10,26.972 18.972,18 30,18 C41.028,18 50,26.972 50,38 C50,49.028 41.028,58 30,58 L30,58 Z M14.007,18.117 L12.007,1.117 C11.974,0.833 12.063,0.549 12.253,0.335 C12.442,0.122 12.714,0 13,0 L47,0 C47.286,0 47.558,0.122 47.747,0.335 C47.937,0.549 48.026,0.833 47.993,1.117 L45.993,18.117 C45.933,18.625 45.501,19 45.001,19 C44.962,19 44.923,18.998 44.883,18.993 C44.334,18.929 43.942,18.432 44.007,17.883 L45.875,2 L41.896,2 L40.463,15.109 C40.407,15.621 39.974,16 39.47,16 C39.434,16 39.397,15.998 39.36,15.994 C38.811,15.934 38.415,15.44 38.475,14.891 L39.885,2 L20.114,2 L21.51,14.893 C21.569,15.441 21.172,15.935 20.623,15.994 C20.587,15.998 20.55,16 20.514,16 C20.01,16 19.577,15.62 19.521,15.107 L18.102,2 L14.124,2 L15.993,17.883 C16.058,18.432 15.665,18.929 15.117,18.993 C14.568,19.059 14.071,18.665 14.007,18.117 L14.007,18.117 Z M33.07,21.247 C33.202,20.71 33.743,20.383 34.279,20.512 C37.98,21.415 41.247,23.435 43.725,26.354 C44.083,26.775 44.031,27.406 43.61,27.764 C43.422,27.923 43.192,28.001 42.963,28.001 C42.68,28.001 42.398,27.882 42.201,27.648 C39.997,25.053 37.094,23.257 33.805,22.455 C33.269,22.324 32.939,21.783 33.07,21.247 L33.07,21.247 Z M44.119,30.467 C43.859,29.98 44.042,29.374 44.529,29.113 C45.015,28.853 45.623,29.036 45.883,29.523 C46.599,30.862 47.142,32.288 47.499,33.762 C47.628,34.299 47.298,34.839 46.761,34.969 C46.682,34.988 46.603,34.997 46.525,34.997 C46.074,34.997 45.665,34.69 45.554,34.232 C45.238,32.922 44.755,31.656 44.119,30.467 L44.119,30.467 Z M48,38 C48,41.401 47.046,44.713 45.243,47.577 C45.053,47.879 44.727,48.044 44.395,48.044 C44.213,48.044 44.029,47.995 43.864,47.891 C43.396,47.596 43.256,46.979 43.55,46.512 C45.153,43.967 46,41.023 46,38 C46,37.448 46.448,37 47,37 C47.552,37 48,37.448 48,38 L48,38 Z M42.771,49.264 C43.163,49.653 43.165,50.287 42.776,50.678 C41.961,51.499 41.065,52.243 40.114,52.89 C39.942,53.007 39.746,53.063 39.553,53.063 C39.233,53.063 38.919,52.911 38.725,52.626 C38.414,52.169 38.533,51.547 38.989,51.237 C39.835,50.661 40.632,49.999 41.357,49.269 C41.747,48.877 42.38,48.875 42.771,49.264 L42.771,49.264 Z M36.945,53.554 C37.141,54.07 36.88,54.648 36.363,54.843 C34.331,55.611 32.19,56 30,56 C27.251,56 24.614,55.397 22.16,54.207 C21.664,53.966 21.456,53.368 21.697,52.871 C21.938,52.374 22.537,52.168 23.033,52.407 C25.212,53.464 27.556,54 30,54 C31.948,54 33.851,53.654 35.656,52.972 C36.172,52.776 36.75,53.037 36.945,53.554 L36.945,53.554 Z M19.612,50.17 C20.032,50.528 20.082,51.16 19.723,51.58 C19.525,51.811 19.245,51.93 18.962,51.93 C18.732,51.93 18.502,51.852 18.314,51.69 C17.109,50.662 16.045,49.48 15.151,48.177 C14.838,47.722 14.954,47.1 15.41,46.787 C15.866,46.474 16.488,46.591 16.8,47.045 C17.595,48.204 18.541,49.255 19.612,50.17 L19.612,50.17 Z M14.432,44.912 C14.316,44.956 14.197,44.977 14.08,44.977 C13.675,44.977 13.294,44.729 13.144,44.328 C12.385,42.307 12,40.178 12,38 C12,36.589 12.164,35.184 12.487,33.823 C12.614,33.285 13.153,32.954 13.691,33.081 C14.229,33.208 14.561,33.748 14.433,34.285 C14.145,35.495 14,36.744 14,38 C14,39.937 14.342,41.829 15.016,43.625 C15.21,44.142 14.949,44.718 14.432,44.912 L14.432,44.912 Z M14.041,29.667 C15.896,26.121 18.922,23.257 22.563,21.604 C23.067,21.376 23.659,21.598 23.887,22.101 C24.115,22.604 23.893,23.197 23.39,23.425 C20.153,24.895 17.463,27.44 15.814,30.593 C15.635,30.935 15.287,31.13 14.927,31.13 C14.77,31.13 14.612,31.093 14.464,31.016 C13.975,30.76 13.786,30.156 14.041,29.667 L14.041,29.667 Z M25.982,21.447 C25.885,20.903 26.246,20.383 26.79,20.285 C27.841,20.096 28.921,20 30,20 C30.552,20 31,20.448 31,21 C31,21.552 30.552,22 30,22 C29.04,22 28.079,22.085 27.144,22.254 C27.084,22.265 27.024,22.27 26.966,22.27 C26.491,22.27 26.07,21.93 25.982,21.447 L25.982,21.447 Z M35.91,40.062 L41.167,35.803 C41.497,35.536 41.622,35.091 41.481,34.692 C41.339,34.293 40.962,34.026 40.538,34.026 L33.66,34.026 L30.919,27.607 C30.762,27.239 30.4,27 30,27 C29.6,27 29.238,27.239 29.081,27.607 L26.34,34.026 L19.462,34.026 C19.029,34.026 18.645,34.305 18.511,34.717 C18.377,35.129 18.524,35.581 18.874,35.835 L24.421,39.864 L22.055,46.672 C21.922,47.056 22.034,47.482 22.339,47.751 C22.526,47.915 22.762,48 23,48 C23.152,48 23.304,47.966 23.446,47.895 L30.135,44.564 L36.54,47.888 C36.897,48.073 37.332,48.026 37.641,47.768 C37.95,47.51 38.074,47.091 37.956,46.706 L35.91,40.062 L35.91,40.062 Z M30.605,42.555 C30.461,42.48 30.303,42.442 30.144,42.442 C29.992,42.442 29.839,42.477 29.699,42.547 L24.749,45.012 L26.554,39.819 C26.699,39.403 26.554,38.94 26.197,38.682 L22.54,36.026 L27,36.026 C27.4,36.026 27.762,35.787 27.919,35.418 L30,30.546 L32.081,35.418 C32.238,35.787 32.6,36.026 33,36.026 L37.715,36.026 L34.126,38.933 C33.808,39.19 33.679,39.614 33.799,40.004 L35.342,45.013 L30.605,42.555 L30.605,42.555 Z"/>
        </symbol>


.main-nav>ul>li>a>svg {
	z-index: 600;
	pointer-events: none;
	width: 40px;
	height: 40px;
	display: block;
	margin: 0 auto 0.1rem;
	fill: white;
	display: block
}
.main-nav:hover>ul>li svg, .main-nav:focus>ul>li svg, .main-nav:active>ul>li svg {
		transition: fill 0.3s
	}
	.main-nav>ul>li:nth-child(1) svg {
		fill: #ff9800
	}

5a6729d5d5173417143679.jpeg
  • Вопрос задан
  • 458 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы