HeighCharts SVG保持字体大小修复

Question

我会将Heighcharts制作的图表用作svg文件。

但是，当svg文件调整大小（增加或缩小）时，不应使用调整其中的文本大小。文本应始终保持大小与svg的外部比较。

到目前为止，我在这里找到了例子：

• Preserve descendant elements' size while scaling the parent element

但是我无法将这个例子（Phrogz的代码看起来很有趣）放到我自己的代码中。

我创建了一个jsfiddle来测试它：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

为了直观地解释，我附加了一个图表，其中树形图（大小）的文本保持相同的大小：

这个问题有解决方案吗？

Answer 1

我怀疑使用attachBaseContext时导出的SVG文件中foreignObject可能是热门问题，但我没有看到您的代码。以下是示例：https://jsfiddle.net/10fan2yq/

在某些Highcharts元素exporting.allowHTML: true以及useHTML: true函数上设置exporting.allowHTML: true以定义元素的自定义格式（例如，返回元素中的值），然后您的SVG文件中创建了formatter，其中包含所有HTML元素。我注意到，如果您使用foreignObject，则必须提出实验性功能，并在文档中对其进行了描述：

  

allowHTML：BooleanSince 4.1.8   实验设置允许图表中的HTML（通过useHTML选项添加），直接在导出的图像中。这允许您在导出的图表中保留复杂的HTML结构，如表格或双向文本。

     

免责声明：HTML在生成的SVG中的foreignObject标记中呈现。官方导出服务器基于支持此功能的PhantomJS，但其他SVG客户端（如Batik）不支持它。这也适用于您要在桌面客户端中打开的已下载SVG。

您的文字看起来并不复杂，因此如果在配置中的任何位置启用了exporting.allowHTML选项，则可以尝试禁用该选项。