重叠 tspan 的 canvg() 问题
canvg() issue with overlapping tspan
我需要将 svg 元素转换为 png。
转换为 png 时,文本重叠且未正确对齐。
实际图像是这样的:
enter image description here
转换后的图片是这样的:
enter image description here
代码是这样的:
//这段代码在svg元素下
<text class="foreignObject" text-anchor="middle" x="43.37111015014165" dy="0" width="85.7422203002833" clip-path="url(#area_clip392N6)" y="1em" iname="0" style="fill: rgb(255, 255, 255);">
<tspan x="43.37111015014165" y="1em" dy="0em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="1.1em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="2.2em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="3.3000000000000003em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="4.4em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="5.5em">from backend</tspan>
</text>
//---------------------------------------- ---------------------------------------------- ----------------------------------
//这是我用来将 svg 转换为 png 的代码:
var c = document.createElement('canvas');
c.width = item.clientWidth;
c.height = item.clientHeight;
canvg(c, angular.element(item).find("svg").parent().html());
imgData['url'] = c.toDataURL('image/png');
我还没有更新 canvg.js 文件 before.Now 我已经更新并且工作正常。
我需要将 svg 元素转换为 png。 转换为 png 时,文本重叠且未正确对齐。
实际图像是这样的: enter image description here
转换后的图片是这样的:
enter image description here
代码是这样的:
//这段代码在svg元素下
<text class="foreignObject" text-anchor="middle" x="43.37111015014165" dy="0" width="85.7422203002833" clip-path="url(#area_clip392N6)" y="1em" iname="0" style="fill: rgb(255, 255, 255);">
<tspan x="43.37111015014165" y="1em" dy="0em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="1.1em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="2.2em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="3.3000000000000003em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="4.4em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="5.5em">from backend</tspan>
</text>
//---------------------------------------- ---------------------------------------------- ----------------------------------
//这是我用来将 svg 转换为 png 的代码:
var c = document.createElement('canvas');
c.width = item.clientWidth;
c.height = item.clientHeight;
canvg(c, angular.element(item).find("svg").parent().html());
imgData['url'] = c.toDataURL('image/png');
我还没有更新 canvg.js 文件 before.Now 我已经更新并且工作正常。