Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как при помощи JS отслеживать перекрашены ли все fill в SVG? (https://javascript.ru/forum/misc/79859-kak-pri-pomoshhi-js-otslezhivat-perekrasheny-li-vse-fill-v-svg.html)

Pavel_16 02.04.2020 00:45

Как при помощи JS отслеживать перекрашены ли все fill в SVG?
 
:help: Есть некая раскраска на 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>

:help: :cray: :help:

рони 02.04.2020 01:29

Цитата:

Сообщение от Pavel_16
КАК это реализовать кодом JS.

циклом обойти все path и проверить значение атрибута fill

Pavel_16 02.04.2020 01:35

Цитата:

Сообщение от рони (Сообщение 522095)
циклом обойти все path и проверить значение атрибута fill

Я понимаю, как по логике должно работать, но сам зеленый пока только начал с JS. Поэтому и прошу помощи у профи.
Если не сложно, то кодом накидать, спасибо за понимание!:agree: :help:

voraa 02.04.2020 08:44

if ( [...document.getElementById('svg').querySelectorAll ('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
alert('Вы все закрасили!')

Pavel_16 02.04.2020 11:50

Цитата:

Сообщение от voraa (Сообщение 522111)
if ( [...document.getElementById('svg').querySelectorAll ('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
alert('Вы все закрасили!')

Это если сделать кнопку??? вариант...:blink:

voraa 02.04.2020 12:05

Цитата:

Сообщение от Pavel_16 (Сообщение 522117)
Это если сделать кнопку??? вариант...:blink:

Какую кнопку?
Сами решайте, когда надо проверять закрашено ли все.
По логике проверка должна быть после закраски каждого очередного path.
Как вы его закрашиваете, мне не ведомо.

Pavel_16 02.04.2020 12:47

Цитата:

Сообщение от voraa (Сообщение 522119)
Какую кнопку?
Сами решайте, когда надо проверять закрашено ли все.
По логике проверка должна быть после закраски каждого очередного path.
Как вы его закрашиваете, мне не ведомо.

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


Часовой пояс GMT +3, время: 06:53.