SVG lengthAdjust 仅用于收缩而不用于拉伸

Question

是否有一种很好且简单的方法来使用lengthAdjust（与textLength一起）在必要时缩小文本（如果太宽）但从不尝试拉伸它？

我想到了通过 JS 生成的 SVG 的两种可能的解决方案：

• 计算字符（或者更确切地说是字素簇）并基于此（连同一些启发式方法，除非使用固定宽度大小的字体）确定是否设置textLength。
• 首先不textLength设置，然后确定使用getBBox()文本是否需要一些收缩，在这种情况下textLength将设置。

恕我直言，这两种解决方案都非常丑陋（并且可能是我对过去遇到的问题的回忆getBBox()）。也许我错过了一些更好的解决方案？

Answer 1

看看这个：https ://stackoverflow.com/a/39886640/1925631 本质上，创建一条跨越您想要在路径上传播文本的确切坐标的路径。测量这条路径。然后，测量文本需要多少像素，字体大小为 1px（以及其他所需的字体功能）。现在调整字体大小以填充可用路径前进宽度的所需百分比。调整起始偏移和文本锚点。现在，最后计算作者指定的 textLength 并选择 lengthAdjust 值，以在低精度/不合格的渲染器上获得精确对齐。

最后，如果您需要支持路径渲染支持上没有文本的查看器，您可以使用具有 JavaScript 支持的一致查看器来创建向后兼容/回退版本。渲染内容并使用 SVG DOM api 获取每个字符/字形的 x、y 和旋转值，现在使用指定的这些属性创建一个新的 SVG DOM 表示形式。您可能还需要 javascript 来计算根 svg 元素的绝对宽度和高度，以及正确指定的 viewBox，并将所有 css 选择器/规则/属性级联/解析/转换为内联属性。但通过这种方式，您可以获得跨平台、跨浏览器/查看器的文本渲染，每个不可变源文件版本只需一个编译步骤。

我还提出了一个要点，以简化最后一步，即解析 css 并删除所有类名，同时保留渲染的最终结果： https: //gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc

这是为了单一通用的svg + javascript代码库，以及web + ios + android软件开发（基于react + React-native + React-native-svg）