javascript - 如何让用户单击一种颜色以成为在单击时更改 svg 对象填充的函数

Question

我正在尝试创建一个调色板，用户可以点击它然后变成填充 svg 对象的颜色。有点像简单的 child 涂色页。我似乎无法弄清楚如何让 javascript 保存颜色，而且我不会使用 php。

我尝试创建输入类型颜色。问题是选择颜色和单击颜色之间的转换

我认为我的代码甚至不是我应该去的方向..

<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;
}

我希望顶部的颜色能够保存其颜色代码以填充 svg onclick 中的路径。但我无法让它工作。就像 children 的彩页。

Answer 1

ID 必须是唯一的!

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>