Change multiple SVG paths in CSS on hover or with javaScript

Question

I was wondering if it is possible to change multiple paths in one svg on a hover. I know you can do d: path("your_Path_Here") but does that work with multible paths?

So like changeing this

<svg id="playIcon" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="m437.019 74.981c-48.352-48.353-112.639-74.981-181.019-74.981s-132.667 26.628-181.019 74.981c-48.353 48.352-74.981 112.639-74.981 181.019s26.628 132.667 74.981 181.019c48.352 48.353 112.639 74.981 181.019 74.981s132.667-26.628 181.019-74.981c48.353-48.352 74.981-112.639 74.981-181.019s-26.628-132.667-74.981-181.019zm-181.019 417.019c-130.131 0-236-105.869-236-236s105.869-236 236-236 236 105.869 236 236-105.869 236-236 236z"/>
    <path d="m256 44c-116.897 0-212 95.103-212 212s95.103 212 212 212 212-95.103 212-212-95.103-212-212-212zm0 404c-105.869 0-192-86.131-192-192s86.131-192 192-192 192 86.131 192 192-86.131 192-192 192z"/>
    <path d="m343.295 233.7-106.61-66.886c-8.233-5.166-18.227-5.44-26.732-.737-8.505 4.705-13.583 13.316-13.583 23.036v133.772c0 9.72 5.078 18.332 13.583 23.036 4.035 2.232 8.404 3.343 12.762 3.343 4.828 0 9.643-1.364 13.97-4.08l106.61-66.886c7.723-4.846 12.334-13.182 12.334-22.3s-4.61-17.452-12.334-22.298zm-10.628 27.658-106.61 66.886c-2.85 1.789-5.44.72-6.423.177-.981-.542-3.264-2.168-3.264-5.535v-133.772c0-3.366 2.282-4.992 3.264-5.535.574-.318 1.699-.815 3.105-.815.997 0 2.135.25 3.318.992l106.609 66.886c2.675 1.678 2.964 4.307 2.964 5.358s-.289 3.68-2.963 5.358z"/>
  </g>
</svg>

to this

<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="m437.02 74.981c-48.353-48.353-112.64-74.981-181.02-74.981s-132.667 26.628-181.02 74.981c-48.351 48.352-74.98 112.639-74.98 181.019s26.629 132.667 74.98 181.019c48.353 48.353 112.64 74.981 181.02 74.981s132.667-26.628 181.02-74.981c48.351-48.352 74.98-112.639 74.98-181.019s-26.629-132.667-74.98-181.019zm-181.02 417.019c-130.131 0-236-105.869-236-236s105.869-236 236-236 236 105.869 236 236-105.869 236-236 236z"/>
    <path d="m256 44c-116.897 0-212 95.103-212 212s95.103 212 212 212 212-95.103 212-212-95.103-212-212-212zm0 404c-105.869 0-192-86.131-192-192s86.131-192 192-192 192 86.131 192 192-86.131 192-192 192z"/>
    <path d="m303.787 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c0-19.792-16.102-35.894-35.894-35.894zm15.894 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
    <path d="m208.213 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c-.001-19.792-16.102-35.894-35.894-35.894zm15.893 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
  </g>
</svg>

Answer 1

You can achieve this with both paths in the SVG (play and pause) with CSS when the SVG is hovered, for example:

svg:hover path#play {
    display: none;
}

Working example:

svg:hover path#play {
  display: none;
}

path#pause1,
path#pause2 {
  display: none;
}

svg:hover path#pause1,
svg:hover path#pause2 {
  display: block;
}

<svg id="playIcon" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="m437.019 74.981c-48.352-48.353-112.639-74.981-181.019-74.981s-132.667 26.628-181.019 74.981c-48.353 48.352-74.981 112.639-74.981 181.019s26.628 132.667 74.981 181.019c48.352 48.353 112.639 74.981 181.019 74.981s132.667-26.628 181.019-74.981c48.353-48.352 74.981-112.639 74.981-181.019s-26.628-132.667-74.981-181.019zm-181.019 417.019c-130.131 0-236-105.869-236-236s105.869-236 236-236 236 105.869 236 236-105.869 236-236 236z"/>
    <path d="m256 44c-116.897 0-212 95.103-212 212s95.103 212 212 212 212-95.103 212-212-95.103-212-212-212zm0 404c-105.869 0-192-86.131-192-192s86.131-192 192-192 192 86.131 192 192-86.131 192-192 192z"/>
    
    <path id="play" d="m343.295 233.7-106.61-66.886c-8.233-5.166-18.227-5.44-26.732-.737-8.505 4.705-13.583 13.316-13.583 23.036v133.772c0 9.72 5.078 18.332 13.583 23.036 4.035 2.232 8.404 3.343 12.762 3.343 4.828 0 9.643-1.364 13.97-4.08l106.61-66.886c7.723-4.846 12.334-13.182 12.334-22.3s-4.61-17.452-12.334-22.298zm-10.628 27.658-106.61 66.886c-2.85 1.789-5.44.72-6.423.177-.981-.542-3.264-2.168-3.264-5.535v-133.772c0-3.366 2.282-4.992 3.264-5.535.574-.318 1.699-.815 3.105-.815.997 0 2.135.25 3.318.992l106.609 66.886c2.675 1.678 2.964 4.307 2.964 5.358s-.289 3.68-2.963 5.358z"/>
    
    <path id="pause1" class="hidden" d="m303.787 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c0-19.792-16.102-35.894-35.894-35.894zm15.894 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
    <path id="pause2" class="hidden" d="m208.213 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c-.001-19.792-16.102-35.894-35.894-35.894zm15.893 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
  </g>
</svg>

---

Or you can change a class for the paths maybe when the SVG is clicked, for example:

svg.addEventListener('click', function() {
    play.classList.toggle('hidden');
});

You would define that class (here .hidden) in the CSS for example with display: none;

Working example:

const svg = document.querySelector('#playIcon');
const play = document.querySelector('#play');
const pause1 = document.querySelector('#pause1');
const pause2 = document.querySelector('#pause2');

svg.addEventListener('click', function() {
  play.classList.toggle('hidden');
  pause1.classList.toggle('hidden');
  pause2.classList.toggle('hidden');
});

.hidden {
  display: none;
}

<svg id="playIcon" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="m437.019 74.981c-48.352-48.353-112.639-74.981-181.019-74.981s-132.667 26.628-181.019 74.981c-48.353 48.352-74.981 112.639-74.981 181.019s26.628 132.667 74.981 181.019c48.352 48.353 112.639 74.981 181.019 74.981s132.667-26.628 181.019-74.981c48.353-48.352 74.981-112.639 74.981-181.019s-26.628-132.667-74.981-181.019zm-181.019 417.019c-130.131 0-236-105.869-236-236s105.869-236 236-236 236 105.869 236 236-105.869 236-236 236z"/>
    <path d="m256 44c-116.897 0-212 95.103-212 212s95.103 212 212 212 212-95.103 212-212-95.103-212-212-212zm0 404c-105.869 0-192-86.131-192-192s86.131-192 192-192 192 86.131 192 192-86.131 192-192 192z"/>
    
    <path id="play" d="m343.295 233.7-106.61-66.886c-8.233-5.166-18.227-5.44-26.732-.737-8.505 4.705-13.583 13.316-13.583 23.036v133.772c0 9.72 5.078 18.332 13.583 23.036 4.035 2.232 8.404 3.343 12.762 3.343 4.828 0 9.643-1.364 13.97-4.08l106.61-66.886c7.723-4.846 12.334-13.182 12.334-22.3s-4.61-17.452-12.334-22.298zm-10.628 27.658-106.61 66.886c-2.85 1.789-5.44.72-6.423.177-.981-.542-3.264-2.168-3.264-5.535v-133.772c0-3.366 2.282-4.992 3.264-5.535.574-.318 1.699-.815 3.105-.815.997 0 2.135.25 3.318.992l106.609 66.886c2.675 1.678 2.964 4.307 2.964 5.358s-.289 3.68-2.963 5.358z"/>
    
    <path id="pause1" class="hidden" d="m303.787 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c0-19.792-16.102-35.894-35.894-35.894zm15.894 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
    <path id="pause2" class="hidden" d="m208.213 162.762c-19.792 0-35.894 16.102-35.894 35.894v114.688c0 19.792 16.102 35.894 35.894 35.894s35.894-16.102 35.894-35.894v-114.688c-.001-19.792-16.102-35.894-35.894-35.894zm15.893 150.582c0 8.764-7.13 15.894-15.894 15.894s-15.894-7.13-15.894-15.894v-114.688c0-8.764 7.13-15.894 15.894-15.894s15.894 7.13 15.894 15.894z"/>
  </g>
</svg>