Leaflet中旋转SVG文本显示裁剪问题的排查与解决方案

在Leaflet中使用L.divIcon结合SVG文本作为标记图标时，常规显示正常，但文本旋转后会被视口裁剪。尝试过提取旋转后的BBox并更新SVG viewBox参数等方法，均未解决问题。

可观察到旋转后的文本「125BET」被裁剪，而几乎未旋转的「10665」显示正常，希望通过文本组件的视口信息避免裁剪。

初始代码 #

let svgIcon = L.divIcon({
  html: `
<svg
  version="1.1"
  id="${svgGcTextId}"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <text width="5000" height="5000" x="0" y="${fontSize}" transform="rotate(${rotation})" font-size="${fontSize}">${text}</text>
</svg>`,
  className: "",
  iconSize: [24, 10],
  iconAnchor: [0, fontSize],
});

let marker = L.marker(latlng, { icon: svgIcon, interactive: false });

过程记录 #

• 编辑1：添加transform-origin后，虽能显示更多文本，但文本插入位置偏移，不符合需求。
• 编辑2：可修改rotation和fontSize参数测试不同场景（注：包含地图缩放时的字体缩放代码，但与当前问题无关）。
• 编辑3 - 已解决：通过设置大尺寸SVG（如600x600），将文本置于中心位置，指定transform-origin确保旋转正确，同时设置iconAnchor使SVG居中于参考经纬度，解决了裁剪问题。

最终代码 #

const svgIcon = L.divIcon({
  html: `
<svg
  version="1.1"
  id="${svgGcTextId}"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  width="600"
  height="600"
>
  <text x="300" y="300" transform-origin="300 300" transform="rotate(${rotation})" font-size="${fontSize}">${text}</text>
</svg>`,
  className: "",
  iconSize: [24, 10],
  iconAnchor: [300, 300],
});

let marker = L.marker(latlng, { icon: svgIcon, interactive: false });

目前「125BET」文本有足够空间旋转，但当地图放大、文本缩放过大时，视口可能仍会过小。

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