Блог

Главная - Вопросы по программированию - Как использовать SVG в качестве кнопки HTML / CSS

Как использовать SVG в качестве кнопки HTML / CSS

#html #css #svg

#HTML #css — код #svg

Вопрос:

Я пытался сделать так, чтобы SVG можно было использовать в качестве кнопки, которая в основном переключается между градусами Цельсия и Фаренгейта. Проблема заключалась в использовании самого SVG в качестве кнопки. В идеале я хочу иметь эффект наведения, при котором загорается весь SVG, но сейчас я как бы уперся в стену и ни за что на свете не могу понять, как заставить это работать и почему это выглядит так плохо.

Может кто-нибудь сказать мне, какого черта я здесь делаю не так?

Возможно ли иметь только SVG в качестве кнопки и не выполнять всю работу по созданию прозрачного элемента button и укладке двух элементов?

 .button-wrapper {
  position: relative;
}

button {
  position: absolute;
  height: 3rem;
  width: 3rem;
  border: blue solid;
  background: transparent;
  border-radius: 5rem;
  transition: background 0.3s;
}

.svg-icon {
  position: absolute;
  height: 3rem;
  width: 3rem;
} 
 <div class="button-wrapper">
  <button class="button">
              <svg
                class="svg-icon"
                role="img"
                width="10"
                height="10"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9.25 10.7917C10.0995 10.7917 10.7917 11.4839 10.7917 12.3333C10.7917 13.1828 10.0995 13.875 9.25 13.875C8.40054 13.875 7.70833 13.1828 7.70833 12.3333C7.70833 11.4839 8.40054 10.7917 9.25 10.7917ZM9.25 9.25C7.54646 9.25 6.16667 10.6298 6.16667 12.3333C6.16667 14.0369 7.54646 15.4167 9.25 15.4167C10.9535 15.4167 12.3333 14.0369 12.3333 12.3333C12.3333 10.6298 10.9535 9.25 9.25 9.25ZM27.7253 21.5047C27.585 23.4426 26.8697 24.9673 25.5793 26.0804C24.2905 27.1935 22.59 27.75 20.478 27.75C18.1701 27.75 16.354 26.973 15.0312 25.419C13.7085 23.865 13.0471 21.7313 13.0471 19.0195V17.9188C13.0471 16.1875 13.3524 14.6628 13.9613 13.3431C14.5718 12.025 15.4429 11.0121 16.5775 10.3076C17.7107 9.60304 19.0272 9.25 20.5273 9.25C22.6055 9.25 24.2782 9.80654 25.5485 10.9196C26.8188 12.0327 27.5511 13.5944 27.75 15.6063H24.0407C23.9498 14.4439 23.626 13.6006 23.0695 13.078C22.513 12.5538 21.6666 12.2933 20.5288 12.2933C19.2924 12.2933 18.3674 12.7373 17.7523 13.6222C17.1387 14.5086 16.8227 15.8838 16.8057 17.7461V19.1059C16.8057 21.0515 17.1002 22.4744 17.6891 23.3717C18.278 24.2705 19.2076 24.7191 20.478 24.7191C21.6234 24.7191 22.479 24.457 23.0433 23.9344C23.6075 23.4102 23.9313 22.6008 24.0145 21.5047H27.7253ZM18.5 3.08333C27.0007 3.08333 33.9167 9.99925 33.9167 18.5C33.9167 27.0007 27.0007 33.9167 18.5 33.9167C9.99925 33.9167 3.08333 27.0007 3.08333 18.5C3.08333 9.99925 9.99925 3.08333 18.5 3.08333ZM18.5 0C8.28337 0 0 8.28337 0 18.5C0 28.7166 8.28337 37 18.5 37C28.7166 37 37 28.7166 37 18.5C37 8.28337 28.7166 0 18.5 0Z"
                  fill="#F5F5F5"
                />
              </svg>
            </button>
</div>

Комментарии:

1. css-tricks.com /… Это то, что ты ищешь? Кроме того, кнопка (по умолчанию) отправляет форму. Так что, если вы просто хотите, чтобы SVG был интерактивным , и вам все равно нужно использовать JavaScript для переключения F / C, тогда вы можете <button> исключить это из уравнения и просто добавить обработчик кликов к svg самому себе, чтобы запустить функцию переключения.

2. Функциональность кнопок для SVG — это вопрос Javascript …. но да, это, безусловно, возможно.

3. Но первое, что нужно сделать, это удалить позиционирование из SVG. Это просто не обязательно внутри кнопки. — codepen.io/Paulie-D/pen/dypOgBw

4. Также я заметил, что в вашем SVG нет a viewbox , который действительно должен быть там для правильного центрирования

5. @Woundedstevenjones Спасибо за ответ! Я не понимал, что для того, чтобы сделать его интерактивным, потребуется также javascript. Я имею в виду, я знаю обработчик onclick, но я даже не думал о том, чтобы делать это без кнопки (как бы глупо это ни было). Еще раз спасибо за ответ! Я постараюсь заставить его работать сегодня вечером!