@dsgnfox

Как позиционировать svg?

Есть вот такой код в начале страницы
<svg style="display: none;">
  <symbol id="ic" width="26" height="26" viewBox="0 0 26 26">
    <path fill="#4D75A3" d="M213.5,209.5h18c2.2,0,4,1.8,4,4v18c0,2.2-1.8,4-4,4h-18c-2.2,0-4-1.8-4-4v-18
	C209.5,211.3,211.3,209.5,213.5,209.5L213.5,209.5z"/>
	<path fill="#ffffff" d="M222.3,227.7h1.1c0,0,0.3,0,0.5-0.2c0.2-0.2,0.1-0.5,0.1-0.5s0-1.4,0.6-1.6c0.7-0.2,1.5,1.4,2.4,2
	c0.7,0.5,1.2,0.4,1.2,0.4l2.4,0c0,0,1.2-0.1,0.7-1.1c0-0.1-0.3-0.7-1.8-2c-1.5-1.4-1.3-1.2,0.5-3.6c1.1-1.5,1.5-2.3,1.4-2.7
	c-0.1-0.4-0.9-0.3-0.9-0.3l-2.7,0c0,0-0.2,0-0.3,0.1c-0.1,0.1-0.2,0.3-0.2,0.3s-0.4,1.1-1,2.1c-1.2,2-1.7,2.1-1.9,2
	c-0.5-0.3-0.3-1.2-0.3-1.8c0-2,0.3-2.8-0.6-3c-0.3-0.1-0.5-0.1-1.2-0.1c-1,0-1.8,0-2.2,0.2c-0.3,0.1-0.5,0.5-0.4,0.5
	c0.2,0,0.6,0.1,0.8,0.4c0.3,0.4,0.3,1.2,0.3,1.2s0.2,2.3-0.4,2.6c-0.4,0.2-0.9-0.2-1.9-2c-0.5-0.9-1-2-1-2s-0.1-0.2-0.2-0.3
	c-0.2-0.1-0.4-0.2-0.4-0.2l-2.5,0c0,0-0.4,0-0.5,0.2c-0.1,0.1,0,0.5,0,0.5s2,4.7,4.2,7C220,227.9,222.3,227.7,222.3,227.7
	L222.3,227.7z"/>
  </symbol>
</svg>

И такой в середине
<div class="expander-block">
<div class="expander-block_title">Социальные сети</div>
<div class="expander-block_source-other"><a href="vk.com" target="_blank"><svg><use xlink:href="#ic" class="ic" /></svg>123</a></div>
</div>

SVG иконка не хочет помешаться внутрь блока, а оказывается в правом нижнем углу экрана.
Нужно чтобы она была внутри блока. Как это сделать? Где у меня ошибка?
  • Вопрос задан
  • 2557 просмотров
Решения вопроса 1
Координаты элементов path имеют абсолютное смещение на 209px в обоих осях. Исправленный вариант.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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