Как сделать при помощи JS кнопку "undo" - работа перекрашивание SVG(fill)?
Есть SVG картинка, перекрашиваем в нем fill, то у одного, то у другого path , надоело или не понравилось пользователю и он захотел вернуть цвет прошлый -ВОТ ТУТ И НУЖНА функция ''назад на одно действие" при нажатие на кнопку.
Видел на форуме похожее при работе с текстом, а с таким вариантом нет! Подскажите как реализовать такой код! Пример моего 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: |
|
Цитата:
|
const stateStack = []
Перед любым перекрашиванием делаем stateStack.push(document.getElementById('svg').inn erHTML) По кнопке reset if (stateStack.length) document.getElementById('svg').innerHTML = stateStack.pop() Можно, конечно придумать оптимизацию. Присвоить каждому path свой id При перекрашивании запоминать id того элемента, который перекрасили и именно его innerHTML, ну и восстанавливать соответственно. stateStack.push({id: idpath, html: document.getElementById(idpath).innerHTML}) if (stateStack.length) { const {idpath, html} = stateStack.pop() document.getElementById(idpath).innerHTML = html } |
Не работает.....
Цитата:
https://jsfiddle.net/zcgq5mj2/ вот к этой раскраски нужно,очень НУЖНО по кнопке проверку на fill
if ( [...document.getElementById('svg').querySelectorAll ('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
alert('Вы все закрасили!')
как писал VORAAи по кнопке, возврат на шаг назад!!! :help: :help: :help: :help: :help: :help: Спасибо за помощь ребята, за ранние благодарю!:write: |
Цитата:
if ( [document.getElementById('svg').querySelectorAll('path')].every(ep => ep.getAttribute('fill')!='#ffffff') )
где смена значения атрибута fill в коде? |
Цитата:
По Id исправил и точки вернул, а по смене атрибута, куда его вставить:no: |
Pavel_16,
этот полигон лучше убрать, его сложно обнаружить. <polygon points="131.69 367.997 131.69 367.997 131.69 367.997 131.69 367.997" fill="#ffffff"></polygon>
const elements = document.querySelectorAll("*[fill]");
function handleClick () {
const currentColor = document.querySelector(".palette-button-active");
if (!currentColor) {
alert("Цвет не выбран");
return;
}
this.setAttribute("fill", currentColor.dataset.color);
if ( [...elements].every(ep => ep.getAttribute('fill')!='#ffffff')) alert('Вы все закрасили!')
}
|
Цитата:
вообще походу сломал_____это пи.......... попробовал, не работает:stop: |
svg раскраска
Pavel_16,
const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
function renderColorPalette () {
const paletteContainer = document.querySelector(".palette");
const colorsItems = colors
.map(color => {
return `<button
style="background-color: ${color}"
class="palette-button"
data-color="${color}"><\/button>`;
})
.join("");
paletteContainer.innerHTML = colorsItems;
}
function handleClickOnColor (event) {
const button = event.target.closest(".palette-button");
if (!button) return;
const oldActiveButton = document.querySelector(".palette-button-active");
if (oldActiveButton) {
oldActiveButton.classList.remove("palette-button-active");
}
button.classList.add("palette-button-active");
}
function setEventsOnFilledElements () {
function handleMouseEnter () {
this.classList.add("selected");
}
function handleMouseLeave () {
this.classList.remove("selected");
}
const elements = document.querySelectorAll("*[fill]");
function handleClick () {
const currentColor = document.querySelector(".palette-button-active");
if (!currentColor) {
alert("Цвет не выбран");
return;
}
const save = {elem : this, color : this.getAttribute("fill")};
stateStack.push(save);
this.setAttribute("fill", currentColor.dataset.color);
if ( [...elements].every(ep => ep.getAttribute('fill')!='#ffffff'))
setTimeout(() => alert('Вы всё закрасили!'))
}
elements.forEach(element => {
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);
element.addEventListener("click", handleClick);
});
}
document.addEventListener("DOMContentLoaded", renderColorPalette);
document.addEventListener("click", handleClickOnColor);
document.addEventListener("DOMContentLoaded", setEventsOnFilledElements);
function check(){
const {length} = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill')=='#ffffff');
const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!'
alert(txt)
}
const stateStack = []
function rev(){
if (stateStack.length){
const {elem, color} = stateStack.pop();
elem.setAttribute("fill", color)
}
}
|
Pavel_16,
<!DOCTYPE html>
<meta charset="utf-8">
<style id="compiled-css" type="text/css">
.coloring {
display: flex;
flex-wrap: wrap;
}
.coloring-toolbox {
flex: 1 1 0;
}
.palette {
display: flex;
flex-wrap: wrap;
}
.palette-button {
width: 16px;
height: 16px;
margin: 5px;
border: 2px solid transparent;
cursor: pointer;
}
.palette-button-active {
border-color: #000;
}
.coloring-image {
flex: 3 1 0;
width: 500px;
height: auto;
border: 5px dashed #ddd;
}
.coloring-image > svg {
max-width: 100%;
}
.selected {
opacity: 0.8;
cursor: pointer;
}
path {
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
}
</style><input type="button" id="rev_btn" src="" title="Шаг назад" onclick='rev()' value=
"Шаг назад"> <input type="button" id="check_btn" src="" title="Проверить!"
onclick='check()' value="Проверить"><div class="coloring"><div class="coloring-toolbox palette"></div><div class="coloring-image"><svg id="a780dc9c-2107-4fd6-8fec-765248a5097a" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" width="887.77227" viewbox="0 0 887.77227 772.83071"><title>happy_music</title><polygon points="887.772 763.25 252.263 772.831 0 728.121 393.817 728.121 887.772 763.25" fill=
"#ffffff"></polygon><circle cx="731.82227" cy="101.66024" r="101.66024" fill="#ffffff"></circle><path d="M335.9542,797.01953s1.487-31.15875,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="171.2269" cy="688.52637" r="15.25711" fill="#ffffff"></circle><rect x="168.74434" y="714.21843" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M838.40061,802.34205s1.487-31.15874,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="673.67331" cy="693.8489" r="15.25711" fill="#ffffff"></circle><rect x="671.19075" y="719.54095" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M911.85146,807.66458s1.487-31.15874,31.9712-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="747.12416" cy="699.17142" r="15.25711" fill="#ffffff"></circle><rect x="744.64161" y="724.86348" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M456.24328,782.11645s1.487-31.15874,31.97119-27.53695" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="291.51598" cy="673.6233" r="15.25711" fill="#ffffff"></circle><rect x="289.03342" y="699.31536" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M229.50369,787.439s1.487-31.15874,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="64.77639" cy="678.94583" r="15.25711" fill="#ffffff"></circle><rect x="62.29383" y="704.63788" width="4.30672" height="30.14703" fill="#ffffff"></rect><circle cx="442.27688" cy="503.48191" r="166.22823" fill="#ffffff"></circle><path d=
"M493.73979,580.41025a43.98767,43.98767,0,0,1,67.51907,0,48.89067,48.89067,0,1,0-67.51907,0Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d="M625.74457,580.41025a43.98759,43.98759,0,0,1,67.519,0,48.89064,48.89064,0,1,0-67.519,0Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="354.70738" cy="464.81392" r="16.81788" fill="#ffffff"></circle><circle cx="486.70738" cy="464.81392" r="16.81788" fill="#ffffff"></circle><circle cx="322.49478" cy="545.03897" r="19.55626" fill="#ffffff"></circle><circle cx="547.39179" cy="545.03897" r="19.55626" fill="#ffffff"></circle><polygon points="434.943 505.926 420.276 569.484 444.721 545.039 434.943 505.926" fill=
"#ffffff"></polygon><polygon points=
"510.307 750.38 493.655 736.404 494.043 750.38 488.871 750.38 488.458 735.602 465.975 750.38 456.563 750.38 488.29 729.526 487.061 685.737 486.143 652.666 491.302 652.524 492.233 685.737 493.461 729.487 518.348 750.38 510.307 750.38"
fill="#ffffff"></polygon><polygon points=
"432.076 750.38 415.424 736.404 415.812 750.38 410.654 750.38 410.24 735.602 387.757 750.38 378.345 750.38 410.059 729.526 408.831 685.737 407.913 652.666 413.084 652.524 414.015 685.737 415.23 729.487 440.118 750.38 432.076 750.38"
fill="#ffffff"></polygon><path d=
"M600.83528,388.61566c-4.56112,0-8.58481,3.543-11.27493,8.985-2.37112-8.18315-7.3527-13.874-13.1704-13.874a8.84714,8.84714,0,0,0-1.17422.19724c-2.23625-8.737-7.43356-14.86444-13.493-14.86444-8.1005,0-14.6672,10.9446-14.6672,24.44533s6.5667,24.44533,14.6672,24.44533a8.84716,8.84716,0,0,0,1.17422-.19725c2.23625,8.737,7.43356,14.86444,13.493,14.86444,4.56112,0,8.58481-3.543,11.27493-8.985,2.37113,8.18316,7.3527,13.874,13.1704,13.874,8.1005,0,14.6672-10.9446,14.6672-24.44533S608.93578,388.61566,600.83528,388.61566Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M393.47351,507.83307h0a48.89061,48.89061,0,0,1,48.89061,48.89061v24.44543a48.89061,48.89061,0,0,1-48.89061,48.89061h0a0,0,0,0,1,0,0V507.83307A0,0,0,0,1,393.47351,507.83307Z"
transform="translate(679.72382 1074.30814) rotate(180)" fill="#ffffff"></path><path d=
"M598.30346,444.24843h0A48.89061,48.89061,0,0,1,647.19412,493.139v24.44543a48.89061,48.89061,0,0,1-48.89061,48.89061h0a0,0,0,0,1,0,0V444.24843A0,0,0,0,1,598.30346,444.24843Z"
fill="#ffffff"></path><path d=
"M780.03662,560.56514H772.2795c0-98.37742-80.03569-178.41374-178.41374-178.41374-98.37742,0-178.41374,80.03632-178.41374,178.41374H407.6949c0-102.655,83.51592-186.17086,186.17086-186.17086C696.52134,374.39428,780.03662,457.91019,780.03662,560.56514Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path>
<path d=
"M327.66117,411.058l.00139-.0029-3.64431-1.51771-15.37654-6.50027-5.51164-2.32988-.423,1.06789h0l-7.40381,18.694L316.14,429.28836l.1094.09906-1.40416,3.31082a5.86169,5.86169,0,0,0-.4899.95547c-.98358,2.48353.87418,4.95394,2.63035,5.6494s3.9773-.75381,4.96087-3.23734c.97022-2.44974.02206-5.5618-1.68937-6.31373l.00151-.0029-3.64431-1.51771-12.46676-4.84631,7.12325-17.98534-1.0558-.41806-7.12577,17.992-1.54154-.59929,7.15363-18.06223.18843.07978,14.6541,6.20232.10928.09906-1.404,3.31082a5.85137,5.85137,0,0,0-.48989.95547c-.98371,2.48353.87405,4.95394,2.63022,5.6494s3.9773-.75381,4.96087-3.23734C330.32064,414.922,329.37248,411.80993,327.66117,411.058Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M399.78108,456.95208c-7.564-4.32464-6.05044-13.815-6.05044-13.815-.19032-6.16526-5.284-5.29259-5.284-5.29259l-1.85385.4231a5.62911,5.62911,0,0,0-2.75664-.50981l-2.82.47452c6.42137,1.50877,5.89378,6.88051,5.89378,6.88051l.89964,6.281-16.82582-6.78775,1.93187-4.555a8.12868,8.12868,0,0,0,.68046-1.32715c1.3661-3.44946-1.21409-6.88051-3.65325-7.84645-2.43916-.96618-5.524,1.0471-6.89022,4.49643-1.34744,3.40232-.0305,7.7247,2.3464,8.769l-.002.00415,5.06157,2.10782.03769-.11936Zm-8.54443-11.036.53956,6.012a13.8665,13.8665,0,0,1-2.52575-9.20675,5.82316,5.82316,0,0,0-1.12688-3.22524A6.83065,6.83065,0,0,1,391.23665,445.91606Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M271.4328,368.0405l.002-.004-5.06157-2.10794-21.1545-8.22341,5.33923-4.75027a6.74419,6.74419,0,0,1,9.21683-1.5099l-1.65686-2.46248s-3.11483-4.12374-7.475.23935c0,0-5.39481,7.95307-13.86878,5.92579l28.94032,12.249.15187.13763-1.95014,4.59827a8.12429,8.12429,0,0,0-.68047,1.32715c-1.36609,3.44933,1.2141,6.88038,3.65326,7.84644s5.524-1.0471,6.89022-4.49643C275.12664,373.40733,273.8097,369.085,271.4328,368.0405Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M348.87976,341.126l-1.95027,4.59826a8.13218,8.13218,0,0,0-.68034,1.32715c-1.36622,3.44933,1.214,6.88039,3.65313,7.84645s5.52412-1.0471,6.89022-4.49643c1.34756-3.40232.03062-7.7247-2.34627-8.76915l.002-.004-5.06157-2.10794-17.31509-6.73091,9.89338-24.97992-1.46629-.58077-9.89716,24.98925-2.141-.83221,9.9356-25.0868.26178.11078,20.353,8.61438.152.13763L357.2127,319.76a8.13743,8.13743,0,0,0-.68034,1.32715c-1.36622,3.44946,1.214,6.88051,3.65313,7.84657s5.52412-1.0471,6.89022-4.49656c1.34756-3.40231.03062-7.72469-2.34628-8.769l.002-.00416-5.06157-2.10781L338.98511,304.812h0l-.00088-.00038-.67088-.28358-7.65513-3.23608-10.87066,27.44744,28.9402,12.249Zm-18.809-38.35074Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M257.16744,200.55646l.00353-.00706-8.71319-3.62856-36.41622-14.15627,9.19111-8.17728s6.11371-8.4828,15.86619-2.5991l-2.852-4.23907s-5.36217-7.09893-12.86781.41189c0,0-9.2869,13.69082-23.87434,10.201l49.81893,21.08581.26152.237-3.35707,7.91563a14.00544,14.00544,0,0,0-1.17137,2.28464c-2.35169,5.9379,2.08991,11.84429,6.28877,13.50732s9.50936-1.80256,11.86117-7.74045C263.52617,209.795,261.25917,202.35435,257.16744,200.55646Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M283.90741,319.4701c-18.08491-10.33993-14.46594-33.03029-14.46594-33.03029-.455-14.7407-12.63376-12.65406-12.63376-12.65406l-4.43241,1.01143a13.4583,13.4583,0,0,0-6.59088-1.219l-6.7425,1.13469c15.353,3.60738,14.09161,16.45074,14.09161,16.45074l2.15092,15.0171-40.229-16.2288,4.61893-10.89082a19.45075,19.45075,0,0,0,1.627-3.17306c3.26633-8.24724-2.90271-16.45062-8.73461-18.76034s-13.20748,2.50356-16.47381,10.75068c-3.22184,8.13468-.07322,18.46919,5.60983,20.96607l-.00479.00983,12.10177,5.03977.09011-.28534Zm-20.429-26.3861,1.29451,14.42385c-7.59564-10.08294-6.04314-22.06233-6.04314-22.06233a13.925,13.925,0,0,0-2.69425-7.71121C264.76078,282.95569,263.47837,293.084,263.47837,293.084Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path></svg></div></div>
<script>
// сюда код из поста выше
</script>
|
Цитата:
<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" /> Т.е цвет задавали через атрибут, а не через style. Поэтому я так и проверял цвета по их атрибутам. Новые цвета тоже задавайте через атрибут
function handleClick () {
const currentColor = document.querySelector(".palette-button-active");
if (!currentColor) {
alert("Цвет не выбран");
return;
}
this.setAttribute('fill', currentColor.dataset.color);
check();
}
Так работает. |
Пошла машина...................:dance: :dance: :dance: :dance: :dance:
РОНИ - ты лучший - побольше таких - спасибо огромное! |
DEL
|
| Часовой пояс GMT +3, время: 05:02. |