我的任务是制作一个程序,该程序将使用输入数据所要求的数字生成一个PDF文件。在这张图片中,我们可以看到输入数据的大小,形状之间的差距,形状的类型,蓝图的编号。等等,并且低于实际图表的样子。保持html页面内svg的大小
input data above and actual graphics below
这是非常重要的项目,使用矢量图形,所以我想过使用SVGs因为他们真的很灵活,这是比较容易编程生成它们。 然后,我正在使用一个.NET库(Select.HtmltoPdf)将HTML字符串转换为PDF,这非常方便,因为直接在C#中设计PDF是两腿之间的痛苦。 使用HTML使我可以使用CSS和我比较熟悉的东西。唯一的缺点是我无法直接使用该库来渲染svgs,我必须先将它们放入一个html文件中。
当我将SVG插入到HTML中,然后使用库将其呈现为PDF时,就会出现问题。 如果我直接在说Corel Draw或Adobe Illustrator中打开svg,尺寸会保留,并且所有内容都应该如此。但是,如果我将该文件的扩展名更改为.html并在Chrome中打开它,然后打印为PDF或直接从我的程序渲染PDF,则形状会略微缩小。
我的问题是如何在html页面中显示它们时保持路径的尺寸不变。
这里是我当前的.svg:
<svg x="0" y="0" width="215.9mm" height="279.4mm" viewBox="0 0 215.9 279.4">
<rect x="40" y="40" width="25" height="25" rx="1.5875" ry="1.5875" stroke="black" stroke-width="0.5" fill-opacity="1"/>
<ellipse cx="20" cy="20" rx="20" ry="20" stroke="black" stroke-width="0.5" fill-opacity="0"/>
</svg>
而且我尝试使用HTML,这是基本相同的SVG与周围<html>
标签。
<!DOCTYPE html>
<html>
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css" CHARSET="UTF-8"/>
<svg x="0" y="0" width="215.9mm" height="279.4mm" viewBox="0 0 215.9 279.4">
<rect x="40" y="40" width="25" height="25" rx="1.5875" ry="1.5875" stroke="black" stroke-width="0.5" fill-opacity="1"/>
<ellipse cx="20" cy="20" rx="20" ry="20" stroke="black" stroke-width="0.5" fill-opacity="0"/>
</svg>
</html>
谢谢!