2

Создал 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>

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

7
  • Я дико извиняюсь, а что object потерял в head?
    – Air
    14 апр 2018 в 9:27
  • @Air, а куда его подключать?
    – uzi_no_uzi
    14 апр 2018 в 9:56
  • Я даже представления не имею, что ты хотел реализовать. И зачем какой либо элемент подключать. object - это такой же элемент как и div... Зачем его подключать? Его надо вставить туда куда хочешь...
    – Air
    14 апр 2018 в 9:59
  • Как мне правильно подключить SVG спрайт тогда? И доставать оттуда определенные иконки?
    – uzi_no_uzi
    14 апр 2018 в 9:59
  • Глянь мой ответ тут ru.stackoverflow.com/questions/813878/…
    – Air
    14 апр 2018 в 10:01

1 ответ 1

5
  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"/>

  2. Локально данный пример работать не будет, только на сервере( рабочий пример( во всех браузерах, кроме IE ) ), можно сделать inline, дабы добиться такого же результата.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.