Inline JS : enregistrez la couleur sélectionnée dans--svg-fill-color.
JS : pour chaque SVGpath分配一个mousedown eventListener.
JS : En cliquant surpath(mousedown), attribuez la valeur depath（mousedown）时，将--svg-fill-color的值赋给>使用函数setColor(..)填充路径à>remplissez-le à l'aide de la fonctionsetColor(..)La couleur duchemin.
Une démo assez simple que vous pouvez étendre à tout ce dont vous avez besoin.
Remarque: Les couleurs ne sont pas enregistrées lorsque la page est fermée, vous devez faire attention à : la réécriture du SVG, le stockage des valeurs dans le stockage local, etc.
Mise à jourdans le code après le commentaire "herrstrietzel".
// Javascript // Get reference to all 'path' const paths = document.querySelectorAll('svg path'); const setColor = (element) => { // Assign currently selected color in --svg-fill-color to 'fill' of clicked 'path' element.style.fill = getComputedStyle(document.body).getPropertyValue("--svg-fill-color"); }; // Assign event listener to all 'path' paths.forEach((path, index)=>{ // Executes 'setColor(..)' when path is clicked path.addEventListener("click", (event) => { setColor(event.target) }); });
/* CSS */ body { --svg-fill-color: black } /* default black */
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai créé une petite démo en utilisant votre SVG :
.body中创建一个CSS 自定义属性来保存所选颜色：--svg-fill-color.--svg-fill-color.path分配一个mousedown eventListener.path(mousedown), attribuez la valeur depath（mousedown）时，将--svg-fill-color的值赋给>使用函数setColor(..)填充路径à>remplissez-le à l'aide de la fonctionsetColor(..)La couleur duchemin.Une démo assez simple que vous pouvez étendre à tout ce dont vous avez besoin.
Remarque: Les couleurs ne sont pas enregistrées lorsque la page est fermée, vous devez faire attention à : la réécriture du SVG, le stockage des valeurs dans le stockage local, etc.
Mise à jourdans le code après le commentaire "herrstrietzel".
// Javascript // Get reference to all 'path' const paths = document.querySelectorAll('svg path'); const setColor = (element) => { // Assign currently selected color in --svg-fill-color to 'fill' of clicked 'path' element.style.fill = getComputedStyle(document.body).getPropertyValue("--svg-fill-color"); }; // Assign event listener to all 'path' paths.forEach((path, index)=>{ // Executes 'setColor(..)' when path is clicked path.addEventListener("click", (event) => { setColor(event.target) }); });/* CSS */ body { --svg-fill-color: black } /* default black */