Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2020, 00:45
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

Как при помощи JS отслеживать перекрашены ли все fill в SVG?
Есть некая раскраска на SVG, изначально fill у всех белый, но как только все FILL перекрасятся в другой цвет, то вывести alert - ,,Вы все закрасили!". КАК это реализовать кодом JS. Либо же можно при нажатии на кнопку проверять
(нажал - проверил - если остались изначальные fill, то нечего не произошло(кнопка не сработала), а если все перекрасилось, то кнопка сработала и вывела alert!
Код SVG
<div class="coloring-image">
					<svg id="svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="640px" version="1.1" viewBox="0 0 640 754">
						<path d="M353 659c0,0 -10,36 11,48 19,12 21,24 10,43 0,0 25,-29 3,-44 -19,-13 -16,-33 -10,-42 7,-9 -14,-5 -14,-5z" fill="#ffffff"
						/>
						<path d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z" fill="#ffffff" />
						<path d="M192 2c-100,-15 -183,87 -164,180 0,0 75,47 62,57 -16,12 -36,6 -22,22 12,14 43,30 82,36 41,-71 115,-120 201,-126 -7,-69 -41,-152 -159,-169zm-89 103c-8,22 -20,37 -28,34 -7,-3 -7,-24 1,-46 7,-21 20,-37 27,-34 8,4 8,24 0,46z"
						 fill="#ffffff" />
						<path d="M144 309c-33,-13 -55,-12 -59,-16 -11,-10 -27,-38 -55,-43 -2,6 -3,11 -3,17 -3,-2 -6,-1 -11,-1 -2,3 -2,12 -3,16 -3,-1 -7,-1 -12,-1 -4,42 18,65 22,70 8,9 23,21 52,9 13,-2 28,10 45,26 4,-28 12,-54 24,-77z"
						 fill="#ffffff" />
						<path d="M538 605c11,16 17,29 22,28 15,-2 44,-18 72,-6 -2,6 -4,11 -8,16 4,1 6,3 11,6 -1,4 -5,12 -7,16 3,1 7,3 11,6 -18,47 -79,69 -85,72 -19,8 -65,23 -73,-25 -3,-30 -13,-48 -28,-61 32,-11 61,-29 85,-52z"
						 fill="#ffffff" />
						<path d="M136 517c-23,6 -40,16 -44,12 -10,-11 -24,-41 -53,-48 -3,5 -4,10 -4,17 -4,-2 -7,-2 -12,-2 -2,3 -3,12 -4,17 -3,-1 -8,-2 -13,-2 -14,48 21,103 24,108 11,19 38,58 73,25 44,-47 84,-33 127,-11 3,1 5,2 7,2 -45,-27 -81,-69 -101,-118z"
						 fill="#ffffff" />
						<path d="M619 421c0,139 -113,251 -251,251 -2,0 -3,0 -5,0 1,-3 3,-6 4,-8 7,-9 -14,-5 -14,-5 0,0 -1,6 -2,13 -131,-9 -234,-118 -234,-251 0,-138 112,-250 251,-250 138,0 251,112 251,250zm-24 23c0,79 24,-22 0,0zm-6 1l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89zm-65 122l0 20c-4,0 90,-83 0,-20zm-141 73c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73zm184 -349c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26zm-189 -102c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11zm-188 100l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89zm46 33c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79zm-82 116c0,0 12,53 12,52l0 -45 -12 -7zm17 6c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39zm19 94l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3zm52 56c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27zm0 -193l68 39 67 -39 0 -79 -68 -39 -67 39 0 79zm206 122l0 -78 -68 -40 -68 39 0 79 68 39 68 -39 0 0zm-65 -122l68 39 67 -39 0 -79 -68 -39 -67 39 0 79 0 0zm221 13c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"
						 fill="#ffffff" />
						<path d="M595 444c0,79 24,-22 0,0z" fill="#ffffff" />
						<path d="M589 445l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89z" fill="#ffffff" />
						<path d="M524 567l0 20c-4,0 90,-83 0,-20z" fill="#ffffff" />
						<path d="M383 640c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73z" fill="#ffffff" />
						<path d="M567 291c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26z" fill="#ffffff" />
						<path d="M378 189c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11z" fill="#ffffff" />
						<path d="M190 289l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89z" fill="#ffffff" />
						<path d="M236 322c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79z" fill="#ffffff" />
						<path d="M154 438c0,0 12,53 12,52l0 -45 -12 -7z" fill="#ffffff" />
						<path d="M171 444c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39z" fill="#ffffff" />
						<path d="M190 538l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3z" fill="#ffffff" />
						<path d="M242 594c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27z" fill="#ffffff" />
						<path d="M242,401 310,440 377,401 377,322 309,283 242,322z " fill="#ffffff" />
						<path d="M448,523 448,445 380,405 312,444 312,523 380,562 448,523z " fill="#ffffff" />
						<path d="M383,401 451,440 518,401 518,322 450,283 383,322 383,401z " fill="#ffffff" />
						<path d="M604 414c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z" fill="#ffffff" />
						<path d="M103 108c-7,22 -20,37 -28,34 -8,-4 -9,-24 -1,-47 0,-1 0,-1 1,-2 -7,21 -6,40 2,43 7,3 19,-9 26,-28z" fill="#ffffff"
						/>
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
					</svg>
				</div>


Последний раз редактировалось Pavel_16, 02.04.2020 в 01:28.
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2020, 01:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,634

Сообщение от Pavel_16
КАК это реализовать кодом JS.
циклом обойти все path и проверить значение атрибута fill
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2020, 01:35
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

Сообщение от рони Посмотреть сообщение
циклом обойти все path и проверить значение атрибута fill
Я понимаю, как по логике должно работать, но сам зеленый пока только начал с JS. Поэтому и прошу помощи у профи.
Если не сложно, то кодом накидать, спасибо за понимание!
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2020, 08:44
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 373

if ( [...document.getElementById('svg').querySelectorAll ('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
alert('Вы все закрасили!')
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2020, 11:50
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

Сообщение от voraa Посмотреть сообщение
if ( [...document.getElementById('svg').querySelectorAll ('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
alert('Вы все закрасили!')
Это если сделать кнопку??? вариант...
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2020, 12:05
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 373

Сообщение от Pavel_16 Посмотреть сообщение
Это если сделать кнопку??? вариант...
Какую кнопку?
Сами решайте, когда надо проверять закрашено ли все.
По логике проверка должна быть после закраски каждого очередного path.
Как вы его закрашиваете, мне не ведомо.
Ответить с цитированием
  #7 (permalink)  
Старый 02.04.2020, 12:47
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

Сообщение от voraa Посмотреть сообщение
Какую кнопку?
Сами решайте, когда надо проверять закрашено ли все.
По логике проверка должна быть после закраски каждого очередного path.
Как вы его закрашиваете, мне не ведомо.
Прошу прощения, что не скинул код сразу......
В другом вопросе по этой теме скинул все уже...
(Как сделать при помощи JS кнопку "undo" - работа перекрашивание SVG(fill)?)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание Таблицы-матрицы при помощи JS Rocombo Общие вопросы Javascript 2 26.12.2016 23:53
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 08:58
Как отразить картинку при помощи JS. 2dkott Элементы интерфейса 4 03.09.2009 21:51
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 15:00