我有兩個具有相同元素的SVG。當我點擊SVG1上的一個元素時，它通過切換一個CSS類來突出顯示。我想讓SGV2上的相同元素自動高亮（注：稍后，我想通過點擊SVG2來改變SVG2上的高亮內容）。
我試著做了一個轉換表，當我使用getElementById捕捉SVG1的點擊時，該ID會被轉換為SVG2上的相應ID，然后應用CSS類，但這并不奏效。關于我應該如何做，有什么建議嗎？
這里有一個JSfiddle - https://jsfiddle.net/scottmclaughlin/gynzou0t/21/
//改變被點擊元素的顏色。
function highlighter ( ) {
var ellipses = document.getElementById(this.id) 。
ellipses.classList.toggle("keyHighlight"/span>)。
//也可以在第二個svg上重復高亮。
let duplicateEllipses = (ellipses) => translateTable[ellipses] 。
duplicateEllipses.classList.toggle("keyHighlight1"/span>)。
}
不相關，SVG應該是并排的，但由于某些原因，列/行的CSS并不正確。
uj5u.com熱心網友回復：
ellipses是一個元素而不是一個id，你的duplicateEllipses用法很奇怪，它被定義為一個函式，但被用作一個元素。我認為你應該這樣做的邏輯方式是：
let duplicateEllipses = document. getElementById(translateTable[this.id])。
duplicateEllipses.classList.toggle("keyHighlight1"/span>)。
參見https://jsfiddle.net/415osubL/
uj5u.com熱心網友回復：
使用W3C標準的Web組件<svg-circle-stack>為每個Ellipsis的堆疊。
(在所有現代瀏覽器中支持，在IE中不支持)
WebComponent為每個堆疊的Ellipsis注冊了代碼。
WebComponent在每個Ellipse上注冊監聽器以處理點擊；
并在每次點擊時向所有Ellipsis發送一個Event，并帶有index有效載荷。
具有相同索引的Ellipsis也將切換顏色。
當你添加更多的<svg-circle-stack>時并不重要；使用Events可以確保它們一直作業。
當<svg-circle-stack>從DOM中移除時，它將清理設定在document上其自身范圍之外的監聽器。(點擊處理程式會被自動清理)
定位你自己使用CSS Grid或flexbox.
。 。< style type="text/css"/span>>
.highlight { fill: gold }
svg-circle-stack { width:90px; height: 180px; display:inline-block; background: pink }
svg-circle-stack ellipse { fill:white; stroke:black; pointer-events: all; cursor: pointer }
svg-circle-stack ellipse:hover { stroke:lightgreen }
</style>>
<svg-circle-stack></svg-circle-stack>
<svg-circle-stack><svg-circle-stack>
<svg-circle-stack><svg-circle-stack>
<svg-circle-stack><svg-circle-stack>
<script>
customElements.define("svg-circle-stack", class extends HTMLElement {
connectedCallback（） {
this.innerHTML = `<svg viewBox="15 0 100 190">
<ellipse cx="66" cy="45" rx="20" ry="20" />
<ellipse cx="66" cy="95" rx="20" ry="20" />
<ellipse cx="66" cy="145" rx="20" ry="20" />
</svg>`。
this.ln = this.querySelectorAll（"ellipse"）。 forEach((ellipse, index) => {
ellipse.onclick = (evt) => {
ellipse.dispatchEvent(new CustomEvent("ellipseClick"/span>,
{ bubbles:true, detail:index })
}
return document. addEventListener("ellipseClick", (evt) => {
if (evt.detail == index) ellipse.classList.toggle（"highlight"）。
})
})
}
disconnectedCallback（） {
this.ln。 forEach(span class="hljs-params">ellipse => document. removeEventLister("ellipseClick") )
}
});
</script> uj5u.com熱心網友回復：
這不是最干凈的方法，但你可以試試：
。let ellipses = document. querySelectorAll(' .ellipsoid')
ellipses.forEach(e => {
e.addEventListener('click', function() {
e.classList.toggle("keyHighlight"/span>)
if (e.id.slice(-2) !== '-1') {
let e1 = document.querySelector(`#${e.id}-1`)
if (e1.classList.contains('keyHighlight') & & e. classList.contains('keyHighlight') {
e1.classList.add("keyHighlight"/span>)
} else if (!e1.classList.contains('keyHighlight') & & e. classList.contains('keyHighlight') {
e1.classList.add("keyHighlight")
} else {
e1.classList.remove("keyHighlight"/span>)
}
}
})
}).keyHighlight {fill: #6CAD0E; opacity: 1; }
.keyHighlight1 {fill: #6CAD0E; opacity: 1; }
/* 創建兩個相等的列，彼此相鄰浮動 */。
.column {
float: left;
width: 50%;
padding: 10px;
}
/* 清除列后的浮動 */
.row: after {
內容。""。
display: table;
clear: both。
}
.row {
display: flex;
}<html>/span>
<head>
<meta charset="utf-8">/span>
<title>重復測驗</title>
</head>
<body>
<div class="row">
<div class="column">
<p>/span>SVG1</p>/span>
<svg xmlns="http://www.w3. org/2000/svg"/span> xmlns:xlink="http://www.w3.org/1999/xlink"/span> version="1. 1" width="200" 高度="250" id="fingering">
< ellipse class="ellipsoid" id="LH1" cx="66" cy="45" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
< ellipse class="ellipsoid" id="LH2" cx="66" cy="95" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
< ellipse class="ellipsoid" id="LH3" cx="66" cy="145" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
</svg>
</div>/span>
<div class="column">
<p>SVG2</p>/span>
<svg xmlns="http://www.w3. org/2000/svg"/span> xmlns:xlink="http://www.w3.org/1999/xlink"/span> version="1. 1" width="200" 高度="250" id="fingering1">
< ellipse class="ellipsoid" id="LH1-1" cx="66" cy="45" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
< ellipse class="ellipsoid" id="LH2-1" cx="66" cy="95" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
< ellipse class="ellipsoid" id="LH3-1" cx="66" cy="145" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/>
</svg>
</div>/span>
</div>/span>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/320112.html
標籤：
上一篇：SVG縮放和viewBox