如何在 onclick 方法中应用模板

Question

所以我有一个 xslt 文件，其中包含两个以上的圆圈，这些圆圈通过它们的 ID 进行区分。当我单击一个圆圈时，我希望其他圆圈折叠并将单击的圆圈移动到特定位置。当我再次点击圆圈时，我希望所有其他圆圈再次显示在正确的位置。我该怎么做？

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> 作为我所有 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: 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>

Answer 2

我可以建议三个选项：

(a) 编写Javascript代码，在事件发生时对HTML页面进行更改（您仍然可以在第一时间使用XSLT生成HTML页面） .

(b) 使用 XSLT 处理器 API.

编写 Javascript 代码以在事件发生时调用修改 HTML 页面的新 XSLT 转换

(c) 按照 Martin Honnen 评论中的建议，使用 Saxon-JS 在 XSLT 3.0 中编写整个应用程序，包括事件处理。

这些中的哪一个对您有吸引力在很大程度上取决于您是更习惯于（并且更有效率）编写 Javascript 还是 XSLT —— 也许还考虑了代码的未来可维护性。

如何在 onclick 方法中应用模板

How to apply template in onclick method

javascript

xml

xslt

templates

onclick

更新