Javascript Leaflet 用 svg 显示旋转的文本

我正在try 使用带有图标的标志层L.divIcon(带有SVG文本)来显示传单中的文本.这个很好用.但是，旋转文本时，文本将被剪裁到视口外.我试着用几种方法来调整这一点，但都无济于事.例如，我try 在旋转后提取BBox，然后更新SVG Viewbox参数，但这并不能像预期的那样工作.

在这里，您可以看到包含旋转文本的SVG视图框.文本内容125BET被剪裁.文本10665几乎没有旋转，并且显示正确.

下面是Text组件的ViewBox，我想使用此信息来避免裁剪:

代码:

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 });

Edit:

try 按照彼得斯的建议添加变换原点.尽管这看起来很管用，但它改变了文本的插入点，这是不可取的.见下面的图片，其中125BET中的"1"被平移到大楼的南边.不过，可以看到更多的文本，因为更多的文本位于ViewBox中.

Edit2:

这是一把小提琴.更改旋转和字号的值以测试不同的方案.注意，我有在zoom 时zoom 字体大小的代码(但这在这里不应该是相关的)

https://jsfiddle.net/6vw5z20k/20/

Edit3 - solved个

多亏了彼得斯的输入，我设法用下面的代码解决了这个问题.需要指定一个大的视框(例如600 x 600)，然后使用x和y将文本插入中心.还需要指定变换原点，以便正确执行旋转.最后但并非最不重要的一点是，SVG必须使用icAnchor在引用锁定处居中.

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，但如果放大太远，文本zoom 过大，ViewBox可能会变小.