Не могу добавить иконку через SVG спрайт

213

15 апреля 2018, 21:10

Создал SVG-спрайт и подключил в head таким образом:

<object data="img/sprite.svg" type="image/svg+xml" style="display: none;"></object>

Далее попробовал вывести иконку:

<svg class="slide-header__underline">
    <use xlink:href="#underline"></use>
</svg>

Но ничего не произошло, хотя место под спрайт-выделилось, да не под спрайт, а место рандомного размера.

Код SVG-спрайта:

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
	<symbol id='arrow-left'  width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='arrow-right' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='paragrapg' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M16 1.026h-11.008c-2.181 0-3.955 1.774-3.955 3.955s1.774 3.954 3.955 3.954h3.008v7.065h1v-13.974h2.015v13.974h1v-13.974h3.985v-1zM8 7.936h-3.008c-1.63 0-2.955-1.325-2.955-2.954 0-1.63 1.325-2.955 2.955-2.955h3.008v5.909z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='vector' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M14.94 6c-1.032-0.647-2.214-1-3.44-1-0.778 0-1.529 0.144-2.239 0.404l2.569-2.569c0.203 0.102 0.428 0.165 0.67 0.165 0.827 0 1.5-0.673 1.5-1.5s-0.673-1.5-1.5-1.5-1.5 0.673-1.5 1.5c0 0.22 0.050 0.428 0.136 0.616l-3.91 3.909c-0.081-0.014-0.164-0.025-0.25-0.025-0.827 0-1.5 0.673-1.5 1.5 0 0.085 0.011 0.168 0.025 0.25l-3.386 3.386c-0.188-0.086-0.395-0.136-0.615-0.136-0.827 0-1.5 0.673-1.5 1.5s0.673 1.5 1.5 1.5 1.5-0.673 1.5-1.5c0-0.242-0.063-0.467-0.165-0.669l2.57-2.57c-0.262 0.715-0.405 1.473-0.405 2.239 0 1.469 0.612 2.735 1 3.391v2.109h3v-3h-2.336c-0.418-0.826-0.664-1.713-0.664-2.5 0-0.887 0.22-1.764 0.628-2.545 0.113 0.027 0.228 0.045 0.348 0.045 0.827 0 1.5-0.673 1.5-1.5 0-0.18-0.037-0.35-0.095-0.51 1.644-1.131 3.847-1.268 5.619-0.373v2.383h3v-3h-2.060zM12.5 1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM1.5 13c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM7 15h1v1h-1v-1zM6.976 8c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5zM16 8h-1v-1h1v1z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='ruler' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M0 0.293v16.707h16.707l-16.707-16.707zM1 2.707l2.957 2.957-0.655 0.655 0.707 0.707 0.655-0.655 0.709 0.709-0.655 0.656 0.707 0.707 0.655-0.655 0.71 0.709-0.655 0.655 0.707 0.707 0.655-0.655 0.71 0.71-0.655 0.655 0.707 0.707 0.655-0.655 0.709 0.709-0.655 0.655 0.707 0.707 0.655-0.655 0.71 0.71-0.655 0.655 0.707 0.707 0.655-0.655 2.546 2.546h-13.293v-13.293zM2 15h7.707l-7.707-7.707v7.707zM3 9.707l4.293 4.293h-4.293v-4.293z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='user' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M17 16.488c-0.063-2.687-2.778-4.999-6.521-5.609v-1.374c0.492-0.473 0.842-1.207 1.071-1.833 0.332-0.166 0.624-0.536 0.794-1.033 0.238-0.688 0.146-1.323-0.206-1.629 0.028-0.238 0.046-0.481 0.015-0.723-0.079-0.663 0.065-1.038 0.194-1.368 0.106-0.277 0.229-0.591 0.106-0.945-0.442-1.273-1.727-1.974-3.618-1.974l-0.264 0.005c-1.313 0.047-1.707 0.6-1.971 1.115-0.033 0.062-0.077 0.146-0.077 0.151-1.712 0.153-1.697 1.569-1.684 2.707l0.003 0.369c0 0.205 0.009 0.419 0.026 0.639-0.425 0.3-0.504 1.005-0.179 1.737 0.185 0.415 0.452 0.729 0.749 0.892 0.243 0.674 0.625 1.47 1.179 1.965v1.283c-3.798 0.589-6.554 2.907-6.617 5.625l-0.012 0.512h17.023l-0.011-0.512zM1.054 16c0.392-2.094 2.859-3.821 6.122-4.204l0.441-0.052v-2.666l-0.216-0.15c-0.393-0.272-0.791-0.947-1.090-1.851l-0.083-0.281-0.294-0.051c-0.053-0.019-0.208-0.153-0.33-0.428-0.075-0.168-0.104-0.312-0.112-0.415l0.51 0.143-0.096-0.749c-0.042-0.33-0.064-0.651-0.064-0.95l-0.003-0.38c-0.015-1.341 0.051-1.634 0.773-1.699 0.545-0.048 0.752-0.449 0.876-0.689 0.15-0.292 0.28-0.543 1.12-0.574l0.227-0.004c0.829 0 2.279 0.169 2.669 1.282 0 0.043-0.052 0.177-0.090 0.275-0.145 0.374-0.364 0.939-0.254 1.853 0.024 0.188-0.007 0.424-0.040 0.675l-0.089 0.805 0.441-0.048c0.008 0.104-0.004 0.269-0.075 0.472-0.097 0.289-0.242 0.438-0.237 0.454h-0.36l-0.114 0.342c-0.283 0.853-0.65 1.497-1.009 1.768l-0.198 0.15v2.726l0.438 0.055c3.211 0.401 5.641 2.123 6.030 4.192h-14.893z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='shopping-cart' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M2.75 12.5c-0.965 0-1.75 0.785-1.75 1.75s0.785 1.75 1.75 1.75 1.75-0.785 1.75-1.75-0.785-1.75-1.75-1.75zM2.75 15c-0.414 0-0.75-0.337-0.75-0.75s0.336-0.75 0.75-0.75 0.75 0.337 0.75 0.75-0.336 0.75-0.75 0.75zM11.25 12.5c-0.965 0-1.75 0.785-1.75 1.75s0.785 1.75 1.75 1.75 1.75-0.785 1.75-1.75-0.785-1.75-1.75-1.75zM11.25 15c-0.414 0-0.75-0.337-0.75-0.75s0.336-0.75 0.75-0.75 0.75 0.337 0.75 0.75-0.336 0.75-0.75 0.75zM13.371 2l-0.302 2h-13.143l1.118 8.036h11.913l1.038-7.463 0.236-1.573h2.769v-1h-3.629zM12.926 5l-0.139 1h-11.574l-0.139-1h11.852zM1.914 11.036l-0.561-4.036h11.295l-0.561 4.036h-10.173z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='comments' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M17 1.5v7.969c0 0.827-0.673 1.5-1.5 1.5h-0.508v-1h0.508c0.276 0 0.5-0.225 0.5-0.5v-7.969c0-0.275-0.224-0.5-0.5-0.5h-14c-0.276 0-0.5 0.225-0.5 0.5v7.969c0 0.275 0.224 0.5 0.5 0.5h1.5v2.892l1.779-1.569 0.661 0.75-3.44 3.035v-4.108h-0.5c-0.827 0-1.5-0.673-1.5-1.5v-7.969c0-0.827 0.673-1.5 1.5-1.5h14c0.827 0 1.5 0.673 1.5 1.5zM14.020 9.54v3.043c0 0.827-0.673 1.5-1.5 1.5h-0.5v3.064l-3.667-3.064h-0.853c-0.827 0-1.5-0.673-1.5-1.5v-3.043c0-0.827 0.673-1.5 1.5-1.5h5.020c0.827 0 1.5 0.673 1.5 1.5zM13.020 9.54c0-0.275-0.224-0.5-0.5-0.5h-5.020c-0.276 0-0.5 0.225-0.5 0.5v3.043c0 0.275 0.224 0.5 0.5 0.5h1.217l2.303 1.926v-1.926h1.5c0.276 0 0.5-0.225 0.5-0.5v-3.043z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='files' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M12.497 0h-6.497v2.010h1v-1.010h5v4h4v8h-4.017v1h5.017v-9.818l-4.503-4.182zM13 1.832l2.335 2.168h-2.335v-2.168zM0 3v14h11v-9.818l-4.503-4.182h-6.497zM7 4.832l2.335 2.168h-2.335v-2.168zM1 16v-12h5v4h4v8h-9z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='calendar' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M14 2v-1h-3v1h-5v-1h-3v1h-3v15h17v-15h-3zM12 2h1v2h-1v-2zM4 2h1v2h-1v-2zM16 16h-15v-8.921h15v8.921zM1 6.079v-3.079h2v2h3v-2h5v2h3v-2h2v3.079h-15z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='comment' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M15.5 0h-14c-0.827 0-1.5 0.673-1.5 1.5v10c0 0.827 0.673 1.5 1.5 1.5h0.5v4.102l4.688-4.102h8.812c0.827 0 1.5-0.673 1.5-1.5v-10c0-0.827-0.673-1.5-1.5-1.5zM16 11.5c0 0.275-0.224 0.5-0.5 0.5h-9.188l-3.312 2.898v-2.898h-1.5c-0.276 0-0.5-0.225-0.5-0.5v-10c0-0.275 0.224-0.5 0.5-0.5h14c0.276 0 0.5 0.225 0.5 0.5v10z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='link' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M12.983 6.94l-0.938 0.938-0.707-0.707 0.938-0.938c0.975-0.975 0.975-2.561 0-3.535s-2.561-0.975-3.535 0l-2.987 2.988c-0.975 0.975-0.975 2.561 0 3.535s2.561 0.975 3.535 0l0.707 0.707c-0.683 0.683-1.578 1.023-2.475 1.023s-1.792-0.341-2.474-1.023c-1.364-1.364-1.364-3.585 0-4.949l2.987-2.987c1.365-1.365 3.584-1.365 4.949 0 1.365 1.363 1.365 3.584 0 4.948zM6.042 8.034l-0.13 0.129 0.705 0.709 0.131-0.13c0.975-0.975 2.561-0.975 3.535 0s0.975 2.561 0 3.535l-3.023 3.025c-0.975 0.975-2.561 0.975-3.535 0s-0.975-2.561 0-3.535l1.058-1.059-0.707-0.707-1.058 1.059c-1.364 1.364-1.364 3.585 0 4.949 0.683 0.683 1.578 1.023 2.475 1.023s1.792-0.341 2.475-1.023l3.023-3.024c1.364-1.364 1.364-3.585 0-4.949-1.366-1.367-3.586-1.364-4.949-0.002z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='zoom-in' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M16.604 15.896l-5.173-5.173c0.975-1.137 1.569-2.61 1.569-4.223 0-3.584-2.916-6.5-6.5-6.5-1.737 0-3.369 0.676-4.597 1.904-1.228 1.227-1.903 2.86-1.903 4.596 0 3.584 2.916 6.5 6.5 6.5 1.612 0 3.086-0.594 4.224-1.569l5.173 5.173 0.707-0.708zM6.5 12c-3.033 0-5.5-2.467-5.5-5.5 0-1.47 0.571-2.851 1.61-3.89 1.039-1.038 2.42-1.61 3.89-1.61 3.033 0 5.5 2.467 5.5 5.5 0 3.033-2.467 5.5-5.5 5.5zM7 6h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='arrow-down' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M16.354 5.075l-7.855 7.854-7.853-7.854 0.707-0.707 7.145 7.146 7.148-7.147 0.708 0.708z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='arrow-up' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M16.354 11.896l-0.707 0.707-7.147-7.146-7.146 7.146-0.707-0.707 7.853-7.853 7.854 7.853z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='location-pin' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='email' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M0 2v13h17v-13h-17zM8.494 9.817l-6.896-6.817h13.82l-6.924 6.817zM5.755 8.516l-4.755 4.682v-9.383l4.755 4.701zM6.466 9.219l2.026 2.003 1.996-1.966 4.8 4.744h-13.677l4.855-4.781zM11.201 8.555l4.799-4.725v9.467l-4.799-4.742z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='mobile' width="17" height="17" viewBox="0 0 17 17"> 
		<path d="M12.5 0h-8c-0.827 0-1.5 0.673-1.5 1.5v14c0 0.827 0.673 1.5 1.5 1.5h8c0.827 0 1.5-0.673 1.5-1.5v-14c0-0.827-0.673-1.5-1.5-1.5zM4.5 1h8c0.276 0 0.5 0.224 0.5 0.5v1.5h-9v-1.5c0-0.276 0.224-0.5 0.5-0.5zM13 4v8h-9v-8h9zM12.5 16h-8c-0.276 0-0.5-0.224-0.5-0.5v-2.5h9v2.5c0 0.276-0.224 0.5-0.5 0.5zM9 14.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5z" fill="#000000" /> 
	</symbol> 
 
	<symbol id='underline' width='200' height='6' viewBox="0 -1 200 8"> 
		<path d="m-0.2-0.5 97.8 0 4.6 7 97.8-0.2" fill='white' style="stroke:black;"/> 
	</symbol> 
 
</svg>

Что я делаю неправильно?

Answer 1

Чтобы обратиться к элементу(#mobile), который расположен в другом файле, нам нужно изменить путь в <use/>( указать файл, в котором он расположен), допустим:

1.1 symbol находится в файле sprite.svg, а файл лежит в папке img:
<symbol id='mobile' width="17" height="17" viewBox="0 0 17 17">...</symbol>

1.2 Изменяем путь в href:
<use xlink:href="img/sprite.svg#mobile"/>
Так тоже будет работать:
введите сюда код <use xlink:href="img/#mobile"/>
Локально данный пример работать не будет, только на сервере( рабочий пример( во всех браузерах, кроме IE ) ), можно сделать inline, дабы добиться такого же результата.