保持html页面内svg的大小

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回到顶部