保持html页面内svg的大小

我的任务是制作一个程序,该程序将使用输入数据所要求的数字生成一个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>

谢谢!

回答:

这实际上并不清楚你的意思是“形状稍微缩小”。

但是,您的问题可能与CSS中的“215.9mm”并不意味着与真实世界215.9mm相同。 CSS值“1in”(或“25.4mm”)被定义为等于96“CSS像素”。由浏览器决定在屏幕上显示的大小或打印的大小。

当SVG嵌入到HTML中时,浏览器正在决定HTML页面中“215.9mm”代表的内容以及由此生成的PDF。另外不要忘记,它也可能决定调整其HTML页面的想法以适应它认为的打印机页面大小。

当您的矢量软件生成PDF时,我期望它能够根据您的PDF大小(无论是A4还是其他),使用这些长度值的更准确的表示。

以上是 保持html页面内svg的大小 的全部内容, 来源链接: utcz.com/qa/267261.html

回到顶部