Блог

У меня есть svg-файл человеческого тела с группами следов, сделанных для каждой мышцы. Я хотел бы создать функцию, которая выделяет определенные мышцы. Использование регулярных выражений-это неправильный путь. Я пытался использовать xml, но я не уверен, как это сделать правильно, и я не уверен, что xml действительно правильный путь.

Это структура моего файла svg:

 lt;svggt;  lt;g id="Muscles" transform="translate(-0.146 0.364)"gt;  lt;g id="Abdominals"gt;  lt;path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/gt;  lt;path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/gt;  lt;/ggt;  ...  ...  lt;g id="Triceps"gt;  lt;path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/gt;  lt;path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/gt;  lt;/ggt;  lt;/ggt; lt;/svggt;  

Я пытаюсь изменить цвет данной мышцы.

Ты можешь это сделать:

 let abd = document.getElementById("Abdominals").getElementsByTagName("path") for (let path of abd) {  path.setAttribute("fill", "red"); } 

 lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1066.48291015625 731.18701171875 1521.556640625 1144.586181640625" version="1.1" gt;  lt;g id="Muscles" transform="translate(-0.146 0.364)"gt;  lt;g id="Abdominals"gt;  lt;path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/gt;  lt;path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/gt;  lt;/ggt;  lt;g id="Triceps"gt;  lt;path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/gt;  lt;path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/gt;  lt;/ggt;  lt;/ggt; lt;/svggt; 

Это самый простой способ, например, получить элементы пути с помощью их идентификаторов, а затем изменить их атрибуты, как обычно. Вам не нужно изменять атрибуты всех дочерних элементов пути ваших групп, так как вы извлекаете всю их коллекцию и т. Д.