SVG地图添加标记遇技术问题，请求协助解决

首次接触SVG，需要制作带位置标记的世界SVG地图，但添加标记时遇到问题。曾参照相关Stack Overflow帖子操作未成功，也未找到易理解的SVG地图添加标记指南。

尝试的代码 #

我用<symbol>标签创建标记，代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created for MapSVG plugin: http://mapsvg.com -->
<svg>
    <symbol id="markerIcon" viewBox="6 6 354 546" >
      <path d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9
        C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8
        c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>
    </symbol>
</svg>

遇到的问题 #

• 标记单独打开显示异常
• 使用<object>调用标记时也存在显示问题
• 地图文件过大（1.18MB），无法内联展示

解决方案 #

1. 修正标记的<symbol>定义 #

标记显示异常主要有两个原因：<symbol>的viewBox范围不足以完整容纳图形，导致区域被裁剪；路径未设置填充色，默认透明导致看不到。修正后的代码：

<symbol id="markerIcon" viewBox="0 0 360 560">
  <path d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z" fill="#ff4444"/>
</symbol>

• 调整viewBox为0 0 360 560，完全覆盖路径坐标范围
• 添加fill属性设置标记颜色，确保可见

2. 在地图SVG中添加标记 #

不要用<object>调用，直接把上述<symbol>代码插入到世界地图SVG的<svg>根标签内部（建议放在地图图形代码之前），再用<use>标签在指定位置渲染标记：

<!-- 替换[x][y]为目标位置的SVG坐标，调整宽高适配地图 -->
<use href="#markerIcon" x="[地图X坐标]" y="[地图Y坐标]" width="25" height="37"/>

3. 获取地图坐标的小技巧 #

• 用浏览器打开地图SVG，右键开启开发者工具，移动鼠标到目标区域，工具会显示当前鼠标的SVG坐标
• 用Inkscape等SVG编辑器打开地图，直接定位目标位置的坐标

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