如何解决将 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 高度
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 举报,一经查实,本站将立刻删除。