如何在角度svg地图上选择区域

Question

我为角度类型脚本项目添加了这个地图，让任何人都知道如何在地图上创建选择区域

此处的堆栈闪电战

这里是jsFiddle代码链接

css此处

p {font-size: 12px}
#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar  {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}
.row-wrap {
text-align: center;
float: left;
margin: 0 10px;
}
.row-middle {
font-size: 30px;
color: #0E76FE;
font-weight: 700;
}
.row-middle-two{
font-size: 17px;color: #808490;
}
.row-middle-three{
font-size: 14px;color: #9DA2AE;
}
.row-bottom-small{
font-size: 10px; color: #B9C0CD;
}.row-top-small{
font-size: 10px;
color: #B9C0CD;
}
.row-bottom{
color: #A3A9B5;font-size: 12px;
}
.row-top{
color: #A3A9B5;font-size: 12px;
}
p {font-size: 12px}

#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar  {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}
.row-wrap {
text-align: center;
float: left;
margin: 0 10px;
}
.row-middle {
font-size: 30px;
color: #0E76FE;
font-weight: 700;
}
.row-middle-two{
font-size: 17px;color: #808490;
}
.row-middle-three{
font-size: 14px;color: #9DA2AE;
}
.row-bottom-small{
font-size: 10px; color: #B9C0CD;
}.row-top-small{
font-size: 10px;
color: #B9C0CD;
}
.row-bottom{
color: #A3A9B5;font-size: 12px;
}
.row-top{
color: #A3A9B5;font-size: 12px;
}
p {font-size: 12px}

#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar  {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}
.row-wrap {
text-align: center;
float: left;
margin: 0 10px;
}
.row-middle {
font-size: 30px;
color: #0E76FE;
font-weight: 700;
}
.row-middle-two{
font-size: 17px;color: #808490;
}
.row-middle-three{
font-size: 14px;color: #9DA2AE;
}
.row-bottom-small{
font-size: 10px; color: #B9C0CD;
}.row-top-small{
font-size: 10px;
color: #B9C0CD;
}
.row-bottom{
color: #A3A9B5;font-size: 12px;
}
.row-top{
color: #A3A9B5;font-size: 12px;
}
p {font-size: 12px}

#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar  {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}

Answer 1

将其添加到angular |编辑

要在angular内部使用它，您应该使用它(angular的(生命周期挂钩，特别是，对于您的情况，我会在appComponent中使用ngAfterViewInit。由于typescript不支持元素上的style属性，因此我之前写的代码应该有一些变化。

这是一个工作示例，下面是相关的代码

ngAfterViewInit() {
let selectedArea = null;
let areas = document.querySelectorAll<SVGElement>('path'); // gets an array of all of the paths in the DOM
areas.forEach((area) => {. // for each svg path
area.addEventListener('mouseover', function () {
area.style.fill = 'red'; // add red on hover
});
area.addEventListener('mouseout', function () {
area.style.fill = '';  // return to default on mouse out
});
area.addEventListener('click', function () {
console.log(selectedArea);
if (selectedArea) {
// check if there is a selectedArea
document.querySelector<SVGElement>(`#${selectedArea}`).setAttribute('class', 'st0') // changed
}
if (selectedArea !== area.id) {
selectedArea = area.id;
area.setAttribute('class', 'selectedArea'); // changed
}
});
});
}

---

这取决于你想要实现什么。如果你想在悬停时突出显示一个区域，请将其添加到你的CSS:中

path:hover { fill: red; }

如果你想要一个更可定制的方法来存储用户的选择，你可以使用JS。这里是一个最小版本(将选择存储在一个变量中(。我在你的CSS中添加了一个名为selectedArea的类。使用JS，我选择了所有的SVG路径，并为它们分配了eventListeneres。

我不能附加你的整个代码，因为你的HTML太长了，所以CSS如下：

#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}
#radar {
fill: #F99EAD;
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1.5);
}
60% {
opacity: 1;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}

.selectedArea {
stroke: black;
fill: purple;
}

JS:

let selectedArea = null
let areas = document.querySelectorAll("path")
areas.forEach((area) => {
area.addEventListener("mouseover", function() {
area.style.fill = "red"
});
area.addEventListener("mouseout", function() {
area.style.fill = ""
});
area.addEventListener("click", function() {
console.log(selectedArea)
if (selectedArea) { // check if there is a selectedArea
document.querySelector(`#${selectedArea}`).classList = "st0"
}
if (selectedArea !== area.id) {
selectedArea = area.id
area.classList = "selectedArea"
}
})
})