如何检查 svg 路径是否具有与数组中的值匹配的类,如果是,则添加一个新类

2024-04-15

我有一个数组和一些svg path元素(我正在使用传单地图 https://leafletjs.com/)。我需要检查路径的类是否与数组中的值之一匹配,如果是则添加一个类fadeIn to it.

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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" rel="stylesheet"/>
<script src="https://www.jikupin.com/world.json"></script>

<div id='map'></div>

你的bug很微妙。你从一个开始Array of Strings:

var nationList = ["usa", "france", "italy"];

然后你打电话String.prototype.includes, 通过path.className作为一个论点。

if (foundNations.includes(path.className)) { path.classList.add('fadeIn')

在那里,你隐隐约约地assuming that path.className is a String。但是,令人惊讶的是,这不是一个String, 它是SVGAnimatedString https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString!

console.log(path.className)
> [object SVGAnimatedString] {
   animVal: "germany",
   baseVal: "germany"
  }

是的,在某些边缘情况下,SVG 元素的类名称可以在动画过程中修改。

您可能想要做的是使用baseVal的财产SVGAnimatedStrings https://developer.mozilla.org/en-US/docs/Web/API/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"


由于另一个假设,您遇到了第二个问题。你是assuming that path.className仅包含one类名,但是根据文档 https://developer.mozilla.org/en-US/docs/Web/API/Element/className,强调我的:

cName是代表类的字符串变量或空格分隔的类当前元素的。

事实上,如果您使用浏览器中可用的开发人员工具来检查 SVG 元素,您会看到类似的内容......

<path class="Italy leaflet-interactive" stroke="#ffffff" ....></path>

所以在这种情况下,您假设className.baseVal将是字符串"Italy",但实际上,它需要的值"Italy leaflet-interactive".

这里的方法是使用Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList迭代类名s看看是否any其中匹配给定的 团体。



此外,我认为这是一个例子XY问题 https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem。我想你不想问

如何检查 SVG 路径是否具有匹配的类foo?

反而

当要素匹配时如何在Leaflet中符号化SVG多边形foo?

因为我认为将支票移至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 提供了方便的功能,例如L.Path.setStyle https://leafletjs.com/reference-1.3.0.html#path-setstyle只要您保留对实例的引用,就隐藏了直接处理选择器和 SVG 类的复杂性L.Polygon周围(在这种情况下,您可以在onEachFeature打回来)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查 svg 路径是否具有与数组中的值匹配的类,如果是,则添加一个新类 的相关文章

  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 使用 Jquery 传递隐藏字段值

    我有一个正常的hidden Input field我在哪里生成random string 我需要将其附加到我尝试将数据发布到另一个页面的 URL 中 我已经做到了这一点并且效果很好 url Upload html field1 newval
  • 如何将类型添加到 Vite 库构建中?

    我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库 我创建了该项目vue ts预设 在我的组件中 我定义了道具及其类型 并使用了一些接口 但
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考
  • Riak 在 MapReduce 查询中失败。使用哪种配置?

    我正在与 riak riak js 结合开发一个 nodejs 应用程序 并遇到以下问题 运行此请求 db mapreduce add logs run 正确返回存储在存储桶日志中的所有 155 000 个项目及其 ID logs 1GXt
  • Safari 滚动条和 SVG

    问题 Safari 无法正常工作 而是使用滚动条渲染我的 SVG 图像 问题的改进版本 如何填充设定的宽度并根据 Safari 中的宽高比计算高度 感谢普罗格兹 相关代码 SVG File viewBox 0 0 800 800 未指定高度
  • 如何使用 GreaseMonkey 让浏览器恢复“/”键?

    Lots of web pages seem to use the key for searching I d like to disable that because 100 of the time I want to use to se
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • 选择 asp.net CheckBoxList 中的所有项目

    ASP NET 和 C 我想要一个带有 全选 项目的复选框列表 当这个特定项目是 已选择 所有其他都将被选择 也 当选择被删除时 这个项目 也将来自所有人 其他物品 选中 取消选中 任何其他项目只会有一个 对特定项目的影响 无论选择状态如何
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • JQuery UI:将长元素放在光标位置而不是元素的中间

    我有一些很长的可拖动元素 可以将它们放入背景表的所有单元格中 当我开始拖动此类元素并将其悬停在可放置容器 表格的单元格 上时 了解元素将被放置到何处的 热点 点是其自身的中间 不幸的是 我的元素的中间通常不可见 并且将元素放在正确的位置是没
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文
  • 区分 NaN 输入和输入类型为“number”的空输入

    我想使用 type number 的表单输入 并且只允许输入数字

随机推荐