@olyabolya

Как поднять вверх svg иконку?

Добрый день. Есть такой код:
<div class="step-info__item">
	<div class="info-contaner"><p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">Госпошлина</p> 
		<svg class="info-icon" style="margin-right: 5px;margin-left: 7px!important;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
			<defs>
				   <path id="nto3a" d="M1092.17 807.4a8.58 8.58 0 1 1-17.16 0 8.58 8.58 0 0 1 17.16 0zm-6.65 4.12a2.52 2.52 0 0 1-.82.19c-.29 0-.49-.05-.6-.14-.12-.1-.18-.27-.18-.53a5.66 5.66 0 0 1 .17-.99l.56-1.95a5.68 5.68 0 0 0 .14-1.04c0-.4-.15-.74-.43-1a1.8 1.8 0 0 0-1.23-.38c-.3 0-.6.05-.94.16-.33.1-.68.23-1.04.38l-.14.6.38-.13c.15-.04.3-.06.44-.06.3 0 .49.05.6.14.1.1.14.28.14.52 0 .14-.01.3-.04.46l-.13.54-.55 1.95a6.1 6.1 0 0 0-.14 1.03c0 .4.15.73.44 1 .3.25.72.38 1.25.38.35 0 .65-.04.92-.14.26-.09.61-.22 1.05-.4zm.14-8.17c0-.34-.13-.63-.38-.87a1.3 1.3 0 0 0-.93-.36c-.36 0-.67.12-.93.36s-.39.53-.39.87c0 .34.13.63.39.87.26.23.57.35.93.35.36 0 .67-.12.93-.35.25-.24.38-.53.38-.87z"></path>
			</defs>
			 <g>
				<g transform="translate(-1075 -798)">
				     <use fill="#dadada" xlink:href="#nto3a"></use>
				</g>
			</g>
		</svg>
		<div class="info-window">
Текст подсказки
		 </div>
                 </div>
<p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">-</p> 
<span class="costs-p__strong costs-p--gos" onchange="handleChange(this)">  4 000 ₽</span></div>

5d46939db15ab841257268.png
Иконка i должна быть справа от слова Госпошлина, но почему-то съезжает вниз. Как её засунуть в эту же строку?
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
@camelCaseVlad
Привет, один из вариантов решения проблемы, это обернуть параграф и СВГ в div и добавить на него display: flex

<div class="step-info__item">
  <div class="info-contaner">
    <div class="state-duty" style="display: flex">
          <p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">Госпошлина</p> 
    <svg class="info-icon" style="margin-right: 5px;margin-left: 7px!important;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
      <defs>
           <path id="nto3a" d="M1092.17 807.4a8.58 8.58 0 1 1-17.16 0 8.58 8.58 0 0 1 17.16 0zm-6.65 4.12a2.52 2.52 0 0 1-.82.19c-.29 0-.49-.05-.6-.14-.12-.1-.18-.27-.18-.53a5.66 5.66 0 0 1 .17-.99l.56-1.95a5.68 5.68 0 0 0 .14-1.04c0-.4-.15-.74-.43-1a1.8 1.8 0 0 0-1.23-.38c-.3 0-.6.05-.94.16-.33.1-.68.23-1.04.38l-.14.6.38-.13c.15-.04.3-.06.44-.06.3 0 .49.05.6.14.1.1.14.28.14.52 0 .14-.01.3-.04.46l-.13.54-.55 1.95a6.1 6.1 0 0 0-.14 1.03c0 .4.15.73.44 1 .3.25.72.38 1.25.38.35 0 .65-.04.92-.14.26-.09.61-.22 1.05-.4zm.14-8.17c0-.34-.13-.63-.38-.87a1.3 1.3 0 0 0-.93-.36c-.36 0-.67.12-.93.36s-.39.53-.39.87c0 .34.13.63.39.87.26.23.57.35.93.35.36 0 .67-.12.93-.35.25-.24.38-.53.38-.87z"></path>
      </defs>
       <g>
        <g transform="translate(-1075 -798)">
             <use fill="#dadada" xlink:href="#nto3a"></use>
        </g>
      </g>
    </svg>
    </div>
    <div class="info-window">
Текст подсказки
     </div>
                 </div>
<p class="costs-p" style="font-size: 14px; margin: 0 0 5px 0;">-</p> 
<span class="costs-p__strong costs-p--gos" onchange="handleChange(this)">  4 000 ₽</span></div>


https://jsbin.com/baguhinaqu/edit?html,output
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
what the fuck ?
https://codepen.io/topicstarter/pen/MNEMMP - если так сделать то круто выгялдит - наведите на иконку
Но так SVG короче

<div class="">
<p>
  <span>Госпошлина</span>
  <svg width="40" height="40">
    <g>
      <title>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia exercitationem molestiae fuga quisquam consequuntur nobis aperiam neque quae quia possimus.
      </title>
      <ellipse cx="20" cy="20" rx="10" ry="12" fill="#ccc"/>
      <text font-size="22px" x="16" y="27" fill="#fff">i</text>
    </g>
  </svg>
  <span>Текст подсказки - 4 000 ₽</span>
</p>
</div>


https://codepen.io/topicstarter/pen/QeqeGB
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы