如何将图片嵌入PNG/SVG指定区域以作为动态地图标记使用

实现方案 #

你可以直接在现有SVG内部新增<image>标签嵌入目标图片，利用SVG本身的坐标系适配规则，无需额外绝对定位，图片会跟随SVG整体缩放，完全适配地图标记的动态使用场景。

具体操作步骤 #

1. 确定蓝色区域的坐标参数
   你可以先在SVG的</g>标签结束后、</svg>标签结束前临时插入一个测试矩形，调整x、y、width、height四个属性，直到矩形刚好完全覆盖住蓝色区域：

<!-- 测试用矩形，调整参数直到匹配蓝色区域大小位置 -->
<rect x="15" y="20" width="55" height="60" fill="red" opacity="0.5"/>

这里的坐标是基于SVG顶层viewBox="0 0 85 109"的坐标系，上述数值仅为示例，你需要根据实际蓝色区域调整。

2. 替换为图片标签
   测试得到准确的坐标参数后，把测试矩形替换为目标图片的标签即可：

<image 
  href="你的嵌入图片地址" 
  x="你测试得到的x值" 
  y="你测试得到的y值" 
  width="你测试得到的宽度值" 
  height="你测试得到的高度值"
  preserveAspectRatio="xMidYMid meet"
/>

preserveAspectRatio属性可以根据你的需求调整：

• 选xMidYMid meet：图片会完整显示，等比缩放适配区域，可能留空白
• 选xMidYMid slice：图片会撑满整个区域，等比缩放，超出部分裁剪
• 选none：图片会拉伸铺满区域，不保持比例

补充说明 #

如果你的主图还保留PNG格式没有转成矢量路径，可以直接把PNG作为SVG底层图片插入，再叠加嵌入的图片即可，无需单独转矢量：

<svg width="85pt" height="109pt" viewBox="0 0 85 109" preserveAspectRatio="xMidYMid meet">
  <!-- 底层主图PNG -->
  <image href="你的带蓝色区域的主图PNG地址" x="0" y="0" width="85" height="109" />
  <!-- 嵌入的目标图片 -->
  <image href="嵌入图片地址" x="你测试得到的x值" y="你测试得到的y值" width="对应宽度" height="对应高度" />
</svg>

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