所以我有一個 xslt 檔案，其中有兩個以上的圓圈，它們通過它們的 id進行區分。當我單擊一個圓圈時，我希望其他圓圈折疊并將單擊的圓圈移動到特定位置。當我再次單擊圓圈時，我希望所有其他圓圈再次顯示在正確的位置。我怎么做？您可以在 onclick方法中應用新模板嗎？或者我必須使用Javascript嗎？此外，我必須知道哪個圓圈觸發了事件，以便折疊其他圓圈并將這個圓圈移動到正確的位置。
在這里，我在 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>
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402023.html
標籤：javascript xml 模板 xslt 点击