如何在onclick方法中應用模板-(已關閉)-有解無憂

問題已結束

所以我有一個 xslt 檔案，其中有兩個以上的圓圈，它們通過它們的 id 來區分。當我單擊一個圓圈時，我希望其他圓圈折疊并將單擊的圓圈移動到特定位置。當我再次單擊圓圈時，我希望所有其他圓圈再次顯示在正確的位置。我怎么做？

uj5u.com熱心網友回復：

使用 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>

uj5u.com熱心網友回復：

我可以建議三個選項：

(a) 撰寫 Javascript 代碼以在事件發生時更改 HTML 頁面（您仍然可以首先使用 XSLT 生成 HTML 頁面）。

(b) 使用 XSLT 處理器 API 撰寫 Javascript 代碼以呼叫新的 XSLT 轉換，該轉換在事件發生時修改 HTML 頁面。

其中哪一個對您有吸引力在很大程度上取決于您是否更愿意（并且更有效率）撰寫 Javascript 或 XSLT——也許還考慮到代碼的未來可維護性。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407750.html

標籤：

上一篇：要加載的腳本串列存盤在哪里？

下一篇：如何使用React和TypeScript將物件推送到嵌套陣列中？