How to apply template in onclick method (XSLT)-CodePudding

So i have a xslt file with more than two circles which differentiate through their id. When I click on one circle, I want the other circles to collapse and to move the clicked circle to a specific position. When I click on the circle again, I want all other circles to show again on the right position. How do i do that? Can you apply a new template in the onclick method? Or do I have to use Javascript? Also I have to know which circle triggered the event in order to collapse the others and to move this circle into the right position.

Here I tried it with javascript in onclick:

<!-- circle element -->
  <xsl:template match="n1:circle">
    <circle onclick="collapseCircle(this)">
      <xsl:choose>
        <xsl:when test="@id='circleVitSig1'">
          <xsl:attribute name="cx">100</xsl:attribute>
          <xsl:attribute name="cy">100</xsl:attribute>
          <xsl:attribute name="r">80</xsl:attribute>
          <xsl:attribute name="style">fill:rgb(255,231,186);stroke:rgb(255,127,0);stroke-width:2;</xsl:attribute>
        </xsl:when>
        <xsl:when test="@id='circleTwo'">
          <xsl:attribute name="cx">330</xsl:attribute>
          <xsl:attribute name="cy">100</xsl:attribute>
          <xsl:attribute name="r">80</xsl:attribute>
          <xsl:attribute name="style">fill:rgb(188,210,238);stroke:rgb(25,25,112);stroke-width:2;</xsl:attribute>
        </xsl:when>
        <xsl:otherwise>
          <!-- no suitable id found -->
        </xsl:otherwise>
      </xsl:choose>
    </circle>
  </xsl:template>

And thats a snippet of my xml:

<svg>
    <circle id="circleVitsig1"/>
    <text id="textVitsig1">60/min</text>
    <circle id="circleTwo"/>
    <text id="txtTwo">110 mmHg</text>

CodePudding user response：

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>