iOS Safari中含Path的SVG地图无法显示的原因排查

AI 小北

2026-8-11

问题

我开发的网站使用包含多个<path>元素的SVG地图，在Chrome、Firefox、Edge浏览器中均可正常显示及交互，但在iOS的Safari浏览器中无法显示。以下是SVG文件的部分代码（完整文件共659行）：

<svg id="retailer-map"
   viewBox="0 0 590 650"
   preserveAspectRatio="xMidYMid meet"
   id="svg2"
   >
  <defs
     id="defs4">
  </defs>
  <path data-num="2B"
     d="M 562.13712,441.70296 L 559.29258,443.60941 L 559.68597,445.48559 L 561.19903,447.39204 L 559.50441,448.69326 L 560.26093,450.20631 L 559.11102,451.5378 L 559.11102,453.23242 L 561.01746,454.95729 L 561.01746,457.59 L 559.86754,460.04115 L 558.56632,460.61611 L 557.05327,458.5281 L 554.39029,458.73992 L 553.81534,458.34653 L 551.54576,458.34653 L 549.48801,460.25297 L 548.70122,463.46064 L 543.79893,464.39873 L 540.01631,467.6064 L 539.25978,469.69441 L 537.3836,469.51285 L 536.41524,468.36293 L 535.87055,471.60086 L 534.53906,472.14556 L 534.14567,475.17166 L 534.72063,476.50315 L 532.63262,478.0162 L 532.05766,479.52925 L 534.17593,479.92264 L 534.53906,480.95152 L 538.29143,480.95152 L 539.3203,481.61726 L 542.07406,481.10282 L 543.25424,481.79883 L 542.7398,482.64613 L 544.61598,485.21832 L 548.21704,485.21832 L 549.09461,487.79051 L 551.63654,487.79051 L 551.48524,489.33382 L 553.54299,491.90601 L 554.57186,492.42045 L 555.93361,493.26776 L 555.93361,496.53595 L 556.96248,497.38326 L 559.02023,497.38326 L 559.53467,498.23056 L 559.86754,502.8605 L 561.07798,503.70781 L 560.56354,504.40381 L 560.89642,507.12731 L 564.83035,506.976 L 568.1288,504.79721 L 568.00776,499.19892 L 572.54691,492.78358 L 572.54691,482.19222 L 570.67073,478.59116 L 570.09577,467.24327 L 568.76428,465.15526 L 566.31314,463.27908 L 565.91975,456.25852 L 567.06967,453.05085 L 565.55661,447.93674 L 564.61852,443.79097 L 563.83174,442.64106 L 562.13712,441.70296 z "
     
     class="land departement corse departement2b"
     inkscape:label="Haute-Corse"><title>Haute-Corse (2B)</title></path>
  <path data-num="82"
     d="M 266.55906,372.63392 L 265.22758,376.96124 L 267.31559,379.23082 L 266.3775,382.83188 L 265.22758,384.16337 L 266.01436,386.43295 L 262.4133,387.18947 L 259.56877,387.946 L 260.32529,390.57871 L 258.90302,391.00236 L 259.75033,391.78915 L 262.50409,391.78915 L 263.86583,391.12341 L 265.07627,391.78915 L 262.83696,392.81802 L 262.83696,394.5429 L 260.77921,396.08621 L 260.77921,398.29527 L 264.56184,398.47684 L 265.74202,399.68728 L 265.74202,402.0779 L 267.13402,403.43964 L 265.92358,405.31583 L 266.43802,406.3447 L 268.82864,405.31583 L 273.79145,405.31583 L 275.18346,404.46852 L 276.87807,404.46852 L 278.75426,406.70784 L 283.05132,405.49739 L 284.2315,403.62121 L 282.53689,402.74364 L 283.71707,402.25946 L 284.0802,400.53459 L 285.95638,400.71615 L 286.98526,401.89633 L 287.83257,400.53459 L 290.58632,399.50571 L 291.82702,400.08067 L 292.79538,398.47684 L 291.10076,396.60065 L 294.33869,396.60065 L 295.36756,394.72447 L 297.60688,392.66672 L 295.36756,392.66672 L 296.06357,389.76166 L 301.87368,389.06566 L 304.113,387.70391 L 306.83649,386.67503 L 307.71406,385.79746 L 306.65493,383.07397 L 308.19824,379.98735 L 305.47475,379.80578 L 305.14187,375.53898 L 301.02638,377.41516 L 298.27262,376.74942 L 296.578,378.80717 L 293.67295,378.44403 L 293.15851,381.86353 L 291.7665,381.86353 L 290.91919,379.98735 L 290.40475,379.14004 L 288.86144,379.29134 L 285.95638,382.37797 L 282.35532,382.22666 L 281.84088,379.98735 L 281.84088,378.29273 L 281.50801,377.9296 L 280.29757,379.29134 L 278.75426,379.29134 L 277.05964,377.41516 L 275.51633,377.41516 L 274.48745,375.35741 L 275.8492,373.8141 L 275.69789,372.81548 L 273.27701,372.90627 L 273.57962,373.57201 L 269.4036,374.32853 L 266.55906,372.63392 z "
     inkscape:label="Tarn-et-Garonne"
     class="land departement midi departement82"><title>Tarn-et-Garonne (82)</title></path>
[...]
</svg>

原因分析与解决方法

重复ID导致解析失败：你的SVG根节点同时定义了id="retailer-map"和id="svg2"，Safari对DOM元素重复ID的兼容性极差，会直接终止SVG解析。解决方法是删掉其中一个重复ID，比如保留id="retailer-map"即可。
坐标精度过高触发渲染异常：path里的坐标用了8位小数，Safari对超高精度的路径数据处理容易出问题，其他浏览器容错性更强。可以用SVG编辑工具（比如Inkscape、Figma）把坐标精度批量降到2-4位小数，或者用在线工具压缩SVG时设置精度参数。
缺少基础填充/描边样式：你的path元素没有设置fill和stroke属性，Chrome等浏览器会用默认样式渲染，但Safari不会显示无样式的路径。解决方法是给path添加基础样式，比如在CSS里给.land类设置：

.land {
  fill: #cccccc;
  stroke: #ffffff;
  stroke-width: 1;
}

或者直接在SVG的path标签里添加fill="#ccc"属性。

自定义属性干扰解析：path里的inkscape:label是Inkscape的自定义属性，旧版iOS Safari可能对非标准SVG属性敏感。如果不需要这些属性，可以批量删除所有inkscape:label标签。

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