Альтернативный цвет заливки SVG при клике - PullRequest
Новая
       1

Альтернативный цвет заливки SVG при клике

0 голосов
/ 24 сентября 2019

Я пытаюсь заполнить SVG, когда кто-то щелкает по определенному пути, а затем цвет заливки сбрасывается до значения по умолчанию, когда кто-то нажимает второй раз, я успешно добавил возможность заливки цветом при нажатии, но у меня были проблемысброс цвета заливки по умолчанию при втором нажатии;ниже приведен код, который у меня есть на данный момент, он работает наоборот, вместо того, чтобы цвет заливки применялся при первом щелчке и сбрасывался при втором щелчке, вместо этого он сбрасывает цвет заливки при первом щелчке и применяет цвет заливки при втором щелчке, которыйпротивоположность моего желаемого результата. 

jQuery('#color-my-svg').on("click", function() {
  if(!jQuery(this)[0].hasAttribute('style')){
    jQuery('#color-my-svg').css({ fill: "#ff0000" });
  }
  else{
    jQuery(this).removeAttr('style');
  }
});

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

1 Ответ

0 голосов
/ 24 сентября 2019

отметьте это, это может помочь вам 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#mysvg{
			fill:red;
		}
		#mysvg.color-swatcher{
			fill:green;
		}
	</style>
</head>
<body>
	<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>
		jQuery(document).ready(function($) {
			$('#mysvg').on('click', function(){
				$(this).toggleClass('color-swatcher');
			})
		});
	</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...