Html Question posted in
Some basic documentation can be found here.

Html – How can a Mouseclick event on an SVG Text element override the Opacity and Fill of the same element in CSS?

I’d like to add a click event on the webpage wherever the letter ‘W’ appears in grey, such that after a mouseclick event, the letter would stay black in that exact same space in the svg area, even after I move my mouse to anywhere else.

It’s not working now in my piece of JS code, the failed addEventListener function. In the CSS-written piece of code, the style under the svg in HTML, I can only make it black for that single instance I click on the letter.

How can I achieve this in either JS or CSS?

const svg = document.getElementsByTagName('svg');
const text = document.getElementsByTagName('text');

svg.addEventListener('click', () => {
    text.style.opacity = 1;
    text.style.fill = '#000000';
}); 
div {
  border: 1px solid #000000;
}
<div id='paper'>
  <svg version='1.1'width="595" height="842" xmlns="http://www.w3.org/2000/svg">
    <style>
      .text {
          font-family: Sans-serif;
          font-size: x-large;
          fill: #D3D3D3;
          opacity: 0;
          cursor: none;
      }

      .text:hover {
          opacity: 1;
      }

      .text:active {
          fill: #000000;
          opacity: 1;
      }
    </style>

    <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>
Tags:

2

Answers


  1. 0

    Check the console output, it should be throwing an error to guide you correctly. The getElementsByTagName returns a collection, see an example here: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

    So, you must use a loop to add the event listener to all the svg elements and another loop to change every text element. I would suggest using some libraries like JQuery to make it easier to work with listeners.

    I think what you want could be achieved with this code:

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

    You could also add the event listener to the elements with text class instead of the whole svg tag.

    Login or Signup to reply.
  2. 0

    You should note:

    • getElementsByTagName() returns an array, so you should select the first item by [0]

    • assigning CSS properties using JS is outdated, better adding classes that apply changes as I did.

    • by assigning a class to parent you can apply changes to all of it’s childs.

    • Why were you using css inside html while you had an css file, (what i thought by looking at your html : You don’t need to use css inside element to apply it’s changes.)

      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>

    Hope I helped ^_^

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search