如何检查svg路径是否具有与数组中的值匹配的类，如果是，则添加新类
我有一个数组和一些svg path元素（我使用传单映射 ）。 我需要检查一个路径的类是否匹配我的数组中的一个值，如果是这样，添加一个类fadeIn 。
var foundNations = ["usa", "France", "Italy"]; document.querySelectorAll('path').forEach(path => { if (foundNations.includes(path.className)) { path.className.add('fadeIn'); console.log(path.className); } }); (function($) { var map = L.map('map').setView([45.4655171, 12.7700794], 2); map.fitWorld().zoomIn(); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', id: 'mapbox.light' }).addTo(map); var mapHalfHeight = map.getSize().y / 2, container = map.zoomControl.getContainer(), containerHalfHeight = parseInt(container.offsetHeight / 2), containerTop = mapHalfHeight - containerHalfHeight + 'px'; container.style.position = 'absolute'; container.style.top = containerTop; map.scrollWheelZoom.disable(); var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180); var bounds = L.latLngBounds(southWest, northEast); map.setMaxBounds(bounds); map.on('drag', function() { map.panInsideBounds(bounds, { animate: false }); }); // get color depending on population density value function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0'; } function style(feature) { return { weight: 1, opacity: 1, color: '#ffffff', dashArray: '', fillOpacity: 0, fillColor : '#FF0080', className: feature.properties.name }; } var geojson; function selectNation(e) { } function onEachFeature(feature, layer) { layer.on({ click: selectNation }); } geojson = L.geoJson(statesData, { style: style, onEachFeature: onEachFeature }).addTo(map); })( jQuery );
#map { width: 100vw; height: 100vh; } .fadeIn { fill: red; }
你的错误是微妙的。 您将从一个String Array开始：
var nationList = ["usa", "france", "italy"];
然后你调用String.prototype.includes ，传递path.className作为参数。
if (foundNations.includes(path.className)) { path.classList.add('fadeIn')
在那里，你隐含地假设 path.className是一个String 。 但是，令人惊讶的是，它不是一个String ，它是一个SVGAnimatedString ！
console.log(path.className) > [object SVGAnimatedString] { animVal: "germany", baseVal: "germany" }
是的，在某些边缘情况下，可以在动画期间修改SVG元素的类名。
你可能想要做的是使用SVGAnimatedString的baseVal属性 ：
console.log(typeof path.className.baseVal) > "string"
现在一切都应该按照你期望的方式更紧密地工作：
if (foundNations.includes(path.className.baseVal)) { path.classList.add('fadeIn') } console.log(path.className.baseVal); > "spain fadeIn"
由于另一个假设，你有第二个问题。 你假设 path.className只包含一个类名，但根据文档 ，强调我的：
cName是一个字符串变量，表示当前元素的类或空格分隔的类 。
事实上，如果您使用浏览器中提供的开发人员工具来检查SVG元素，您会看到类似……
所以在这种情况下，你假设className.baseVal将是字符串"Italy" ，但实际上，它取值为"Italy leaflet-interactive" 。
这里的方法是使用Element.classList迭代类名，以查看它们中是否有任何匹配给定的组。
此外，我认为这是XY问题的一个例子。 我不认为你想问
如何检查SVG路径是否有一个匹配
foo的类？
反而
当特征与
foo匹配时，如何在Leaflet中对SVG多边形进行符号化？
因为我认为将检查移动到style回调函数更为优雅，例如：
geojson = L.geoJson(statesData, { style: function(feature){ var polygonClassName = feature.properties.name; if (nationList.contains(feature.properties.name)) { polygonClassName += ' fadeIn'; } return { weight: 1, opacity: 1, color: '#ffffff', dashArray: '', fillOpacity: 0, fillColor : '#FF0080', className: polygonClassName }; }, onEachFeature: onEachFeature }).addTo(map);
Leaflet提供了方便的function，如L.Path.setStyle ，它隐藏了直接处理选择器和SVG类的复杂性，只要您保持对L.Polygon实例的L.Polygon （在这种情况下，您可以在onEachFeature打回来）。