我为 Angular 类型脚本元素添加了这张 map ，任何人都知道如何在 map 上创建选择区域
<强> stack blitz here
<强> here the jsFiddle code link
此处为 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;
}
}
最佳答案
将其添加到 Angular | 编辑
要在 Angular 内部使用它，您应该使用它的 (Angular's) lifecycle hooks ，具体而言，对于您的情况，我将在您的 appComponent 中使用 ngAfterViewInit 。我之前编写的代码应该存在一些争论，因为 typescript 不支持元素上的样式属性。
this is a working example ，下面是相关代码
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。
here是最小版本(将选择存储在变量中)。
我向您的 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"
}
})
})
关于html - 如何在 Angular svg map 上选择区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71583255/