将 svg 元素导出到以剪切图像结尾的 svg 文件

问题描述

所以我有一个相对位置的 div。我应该手动添加文本到 div。最后，我应该提取该文本的 svg 文件。因此，为了添加文本，我使用 svg.js 以下方式：

<div style=position: relative; height: 576px; width: 621px>
// dx draggable is an outer library component for dragging element
    <dx-draggable style position: absolute; left: 300px; top: 100px>
    
    <div id=object-0>
    // THE SVG.JS TEXT ELEMENT GOES HERE
    </div>
    
    </dx-draggable>
    
</div>

然后我按以下方式定位文本：

    const draw = SVG().addTo(`#object-${idx}`).size(200,200);

    const text = draw.text(o.text);
    text.transform({
      rotate: 45,});
    text.move(0,0).font({fill: '#f06',family: 'Assistant',fontSize: o.fontSize});
    
    I position the text on x:300,y:100

元素的宽度约为 58px 和 20px 高度

然后我以如下方式将其导出到一个 svg 文件中：

 let svgContent = document.getElementById('object-0').innerHTML;
 let blob = new Blob([svgContent]);
 this.fileSaverService.save(blob,'filename.svg');

    I attached 2 images: the one represents the text I see in DOM. The second one represents the image as I see it in Chrom.

它们都看起来很糟糕：其中一个 DOM 显示文本被剪切。浏览器中的那个显示了完全不同的文本位置。这是为什么？

*它也发生在没有轮换的情况下。浏览器中的图片位置不同

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript svg svg.js