如何在 onclick 方法 (XSLT) 中應用模板

Question

所以我有一個 xslt 文件，其中有兩個以上的圓圈，通過它們的 id 來區分。 當我單擊一個圓圈時，我希望其他圓圈折疊並將單擊的圓圈移動到特定的 position。 當我再次單擊圓圈時，我希望所有其他圓圈再次顯示在右側 position 上。 我怎么做？ 您可以在 onclick 方法中應用新模板嗎？ 還是我必須使用Javascript ？ 另外我必須知道哪個圓圈觸發了事件，以便折疊其他圓圈並將這個圓圈移動到右側 position。

這里我用onclick中的javascript試了一下：

<!-- 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>

這就是我的 xml 的片段：

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

Answer 1

使用 XSL 生成 SVG 后，最好使用 JavaScript 和 CSS 完成所有交互部分。 這可能是一個例子：

 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>

更新

OP 還想包含一個文本。 所以，在這里我將圓圈和文本放在<g>元素中。 我縮放和翻譯每個<g>元素。 問題是您不能混合 SVG 變換和 CSS 變換，因此所有初始位置也在 CSS 中完成。 使用 XSL，您可以創建一個<style>元素，該元素從 XML 元素中獲取每個 id，例如： <style>g#id-of-element {translate: transform(10px, 50px)}... </style> as我所有的nth-child選擇器的替代品。 順便說一句：同時縮放和翻譯有點棘手......

 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: translate(225%, 225%) scale(5); 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>

Answer 2

我可以建議三個選項：

(a) Write Javascript code to make changes to the HTML page when the event occurs (you can still use XSLT to generate the HTML page in the first place).

(b) Write Javascript code to invoke a new XSLT transformation that modifies the HTML page when the event occurs, using the XSLT processor API.

(c) 按照 Martin Honnen 的意見，使用 Saxon-JS 在 XSLT 3.0 中編寫整個應用程序，包括事件處理。

其中哪一個對您有吸引力在很大程度上取決於您是否更舒適（並且更有效率）編寫 Javascript 或 XSLT - 也許還考慮到代碼的未來可維護性。