Cordova应用中SVG地图路径动态着色的最优实现方案咨询

嗨，结合你单页要复用10次SVG地图、还要动态给各国路径着色的场景，我给你梳理几个可行方案，直接说结论：内联SVG+模板复用是最适合你的选择，下面详细拆解：

1. 内联SVG（首选方案） #

直接把SVG代码作为页面DOM的一部分，每个地图实例都是独立的节点，完美适配你用jQuery修改样式的需求，操作起来毫无门槛：

• 优点：每个实例的DOM元素都能直接被jQuery选中，像你写的$('svg.map .usa').css('fill', 'blue')这种代码直接就能用，完全不需要额外处理；兼容性拉满，Cordova的WebView对这种方式支持很好。
• 优化技巧：别手动复制10次SVG代码，用HTML的<template>标签做模板复用，避免代码冗余：

  <!-- 定义地图模板 -->
  <template id="country-map-template">
    <svg class="map" width="400" height="300">
      <!-- 这里放你的30个国家path，每个带对应class -->
      <path class="usa" d="M100,100 L150,50 L200,100 Z" />
      <path class="canada" d="M50,50 L100,20 L150,50 Z" />
      <!-- 其他国家path -->
    </svg>
  </template>
  
  <!-- 实例化模板的JS代码 -->
  <script>
    // 创建10个独立的地图实例
    for(let i=0; i<10; i++){
      const template = document.getElementById('country-map-template');
      const mapInstance = template.content.cloneNode(true);
      // 给每个实例加唯一标识，方便后续单独操作
      mapInstance.querySelector('.map').dataset.instanceId = `map-${i}`;
      document.getElementById('map-container').appendChild(mapInstance);
    }
  
    // 给第1个实例的美国路径改蓝色
    $('svg.map[data-instance-id="map-0"] .usa').css('fill', 'blue');
    // 给第6个实例的加拿大改绿色
    $('svg.map[data-instance-id="map-5"] .canada').css('fill', 'green');
  </script>
  

2. 使用标签（不推荐你的场景） #

这个方案是把SVG定义在页面的<defs>里，然后用<use xlink:href="#map-id" />复用，但对你的需求来说有个致命问题：<use>引用的内容是在Shadow DOM中的，默认情况下jQuery无法直接选中里面的.usa、.canada元素，要访问得折腾Shadow DOM的API，而且Cordova不同版本的WebView可能有兼容性问题。

• 就算用CSS变量来间接控制颜色，操作复杂度也远高于内联SVG，完全没必要给自己找麻烦。

3. 动态加载SVG字符串（备选方案） #

如果你的SVG代码特别长，不想写在页面模板里，可以把SVG文件放在Cordova的assets目录，然后通过JS动态加载并插入到页面，本质和内联SVG效果一样：

// 加载本地SVG文件
fetch('assets/country-map.svg')
  .then(res => res.text())
  .then(svgStr => {
    // 每次加载后插入到容器，生成独立实例
    const $map = $(svgStr).addClass('map').attr('data-instance-id', 'map-new');
    $('#map-container').append($map);
    // 直接修改颜色
    $map.find('.usa').css('fill', 'red');
  });

这个方案适合SVG代码量大、想单独维护SVG文件的场景，同样能满足你的动态着色需求。

内容的提问来源于stack exchange，提问作者Tonald Drump