how do i apply a template to an onclick method

Question

After you have generated the SVG using XSL it is probably better to do all the interactive part using JavaScript and CSS. This could be an example:

var svg = document.getElementById('svg01');

svg.addEventListener('click', e => {
  if (e.target.nodeName == 'circle') {
    svg.querySelectorAll('circle').forEach(c => c.classList.remove('active'));
    e.target.classList.add('active');
    svg.classList.toggle('collaps');
  }
});

svg circle {
  transition: all .5s ease;
}

.collaps circle {
  r: 1px;
  opacity: 5%;
  cx: 1px;
  cy: 1px;
}

.collaps circle.active {
  r: 40px;
  opacity: 100%;
  cx: 50%;
  cy: 50%;
}

<svg xmlns="http://www.w3.org/2000/svg" id="svg01" viewBox="0 0 100 100" height="400">
  <circle cx="20" cy="20" r="5" fill="red"/>
  <circle cx="10" cy="30" r="5" fill="red"/>
  <circle cx="50" cy="20" r="5" fill="red"/>
  <circle cx="80" cy="40" r="5" fill="red"/>
  <circle cx="70" cy="10" r="5" fill="red"/>
</svg>

Update

OP would like to include a text also. So, here I placed the circle and the text in a <g> element. I scale and translate each <g> element. Problem is that you cannot mix SVG tranforms and CSS transforms, so all the initial positions are also done in CSS. Using XSL you could make a <style> element that takes each id from the XML element, something like: <style>g#id-of-element {translate: transform(10px, 50px)} ... </style> as an alternative to all my nth-child selectors. Btw: scaling and translating at the same time is a bit tricky…

var svg = document.getElementById('svg01');

svg.addEventListener('click', e => {
  if (e.target.nodeName == 'circle') {
    let g = e.target.closest('g');
    svg.querySelectorAll('g').forEach(g => g.classList.remove('active'));
    g.classList.add('active');
    svg.classList.toggle('collaps');
  }
});

svg g {
  transition: all .5s ease;
  transform-origin: center;
}

svg g:nth-child(1) {
  transform: translate(20px, 20px);
}

svg g:nth-child(2) {
  transform: translate(10px, 30px);
}

svg g:nth-child(3) {
  transform: translate(50px, 20px);
}

svg g:nth-child(4) {
  transform: translate(80px, 40px);
}

svg g:nth-child(5) {
  transform: translate(70px, 10px);
}

svg.collaps g {
  transform: translate(-25%, -25%) scale(.5);
  opacity: 5%;
}

.collaps g.active {
  transform: scale(8) translate(45%, 45%);
  opacity: 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" id="svg01" viewBox="0 0 100 100" height="400">
  <g>
    <circle cx="5" cy="5" r="5" fill="red" />
    <text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
  </g>
  <g>
    <circle cx="5" cy="5" r="5" fill="red" />
    <text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
  </g>
  <g>
    <circle cx="5" cy="5" r="5" fill="red" />
    <text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
  </g>
  <g>
    <circle cx="5" cy="5" r="5" fill="red" />
    <text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
  </g>
  <g>
    <circle cx="5" cy="5" r="5" fill="red" />
    <text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
  </g>
</svg>

Update

Leave a Comment Cancel Reply