I'm trying to create a color pallette that users can click on that then becomes the color to fill an svg object. kind of like a simple coloring pages for kids. I can't seem to figure out how to tell javascript to save the color, and I can't use php.
I've tried to create an input type color. The problem is the transition between chosing the color and clicking the color
I think my code is not even the direction I should be going..
<input type="color" id="myColor">
<input type="color" id="myColor">
<button class="btn" id="btn-reset">reset</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>
</div>
var x = document.getElementById("myColor").value;
document.getElementById("demo").innerHTML = x;
}
I expect the colors at the top to save their color code to fill the paths in the svg onclick. But I can't get it to work. Like a coloring page for kids.
ID must be unique !
const
ChoseColor = document.querySelector('#btn-Color-hidden'),
ResetButton = document.querySelector('#btn-reset'),
All_svgPath = document.querySelectorAll('#Layer_1 path'),
defaultColor = '#FFFFFF',
LayerSVG = document.querySelector('#Layer_1');
var PathColor = null;
LayerSVG.onclick=e=>{
if (!e.target.matches('path')) return;
e.stopPropagation();
PathColor = e.target;
ChoseColor.value = PathColor.getAttribute('fill');
ChoseColor.click();
}
ChoseColor.onchange=_=> {
PathColor.setAttribute('fill', ChoseColor.value)
}
ResetButton.onclick=_=>{
All_svgPath.forEach(p=>{ p.setAttribute('fill', defaultColor) })
}<input type="color" id="btn-Color-hidden" style="display: none">
<button class="btn" id="btn-reset">reset</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments