Блог

Главная - Вопросы по программированию - Как импортировать значок SVG, чтобы его нельзя было перетащить с экрана?

Как импортировать значок SVG, чтобы его нельзя было перетащить с экрана?

#html #css #svg

Вопрос:

Поэтому я сделал свой собственный значок строки SVG в adobe illustrator, я хочу импортировать его в свой код, однако, когда я использую:

 <img class="shape-1" src="assets/images/widgeticon.svg" alt="shape">

Я могу навести курсор мыши на значок и перетащить его, я хотел бы использовать метод, при котором я не могу перетащить значок с веб — страницы (например, перетащить его на новую вкладку) — я надеюсь, что это имеет смысл.

Я уже использовал эту функцию ранее:

 <i class="lni-thought"></i>

Однако это было сделано с помощью linicons.css, как я могу воссоздать это на своих собственных условиях, чтобы значок не перемещался при попытке перетаскивания с экрана?

Странный вопрос, я знаю, с нетерпением жду ваших ответов!

Ответ №1:

Ответ Пола сработал бы, однако вы теряете некоторый контроль над SVG при включении его в качестве фона.

Лучшим решением было бы просто отключить перетаскивание элемента или отключить события указателя:

 <div class="shape-1" title="shape" draggable='false'></div>

или,

 <div class="shape-1" title="shape" style='pointer-events: none'></div>

Прочитайте об pointer-events этом, прежде чем использовать его. Отключение их приведет к тому, что курсор будет «проходить» через элементы, делая их вообще недоступными для выбора. Но это может быть полезно, если вместо этого вы завернете значок в <a> тег.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

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

1. Итак, то, что я сделал, было просто добавлено перетаскиваемое=»ложь»До: <класс img=» форма-1 src=»активы/изображения/бокс.svg» alt= «форма» > После: <класс img=»форма-1 src=»активы/изображения/бокс.svg» alt=»форма»><класс img=»форма-1″ перетаскиваемое=»ложь» src=»активы/изображения/бокс.svg» alt= «форма» > И, похоже, сработало, это было бы правильно?

Ответ №2:

Вы можете встроить SVG в свой HTML.

Или должно сработать что-то вроде следующего. Используйте другой элемент, затем установите изображение SVG в качестве фона.

 <div class="shape-1" title="shape"></div>


.shape-1 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(assets/images/widgeticon.svg") no-repeat;
}

Ответ №3:

Используйте указатель-события: нет; css в теге img, и если есть событие щелчка, добавьте родительский тег.

Или draggable='false' атрибут

Пример: в i теге вы можете добавить свой щелчок/наведение на любое событие, если это необходимо.

 <i>
  <img style="pointer-events: none;" src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">
</i>

<img draggable='false' src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">
Метки: ,