Как событие Mouseclick в текстовом элементе SVG может переопределять непрозрачность и заливку того же элемента в CSS?

Проверьте вывод консоли, она должна выдать ошибку, чтобы помочь вам правильно. getElementsByTagName возвращает коллекцию, см. пример здесь: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

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

Я думаю, что то, что вы хотите, может быть достигнуто с помощью этого кода:

const svgColl = document.getElementsByTagName('svg');
const textColl = document.getElementsByClassName('text');

for (let i = 0; i < svgColl.length; i++) {
  svgColl[i].addEventListener('click', () => {
    for (let i = 0; i < textColl.length; i++) {
      textColl[i].style.opacity = 1;
      textColl[i].style.fill = '#000000';
    }
  });
}

Вы также можете добавить прослушиватель событий к элементам с текстовым классом вместо всего тега svg.

Вы должны отметить:

• getElementsByTagName() возвращает массив, поэтому вам следует выбрать первый элемент по [0]

• назначение свойств CSS с помощью JS устарело, лучше добавить классы, которые применяют изменения, как это сделал я.

• назначив класс родительскому элементу, вы можете применить изменения ко всем его дочерним элементам.

• Почему вы использовали css внутри html, когда у вас был файл css (что я подумал, глядя на ваш html: вам не нужно использовать элемент css внутри, чтобы применить его изменения.)

  const svg = document.getElementsByTagName('svg')[0];
  
  svg.addEventListener('click', () => {
  svg.classList.add('active')
  })

       div {
            border: 1px solid #000000;
       }
       .text {
            font-family: Sans-serif;
            font-size: x-large;
            fill: #D3D3D3;
            opacity: 0;
            cursor: none;
        }
        svg.active .text{
           opacity: 1;
           fill: #000;
        }

  <div id='paper'>
    <svg version='1.1'width = "595" height = "842" xmlns = "http://www.w3.org/2000/svg">
      <text x = "70" y = "97" class = "text">W</text>
      <text x = "70" y = "100" class = "text">W</text>
      <text x = "70" y = "103.5" class = "text">W</text>
      <text x = "70" y = "107" class = "text">W</text>
      <text x = "70" y = "110.5" class = "text">W</text>
      <text x = "70" y = "114" class = "text">W</text>
      <text x = "70" y = "117.5" class = "text">W</text>
      <text x = "70" y = "121" class = "text">W</text>
      <text x = "70" y = "124.5" class = "text">W</text>
      <text x = "70" y = "128" class = "text">W</text>
      <text x = "70" y = "131.5" class = "text">W</text>
    </svg>
  </div>

Надеюсь, я помог ^_^