Question

我有一个基本的SVG文件，它有一个50mm x 25mm的固定打印尺寸（所以如果我用CorelDraw打开它，文件大小就是这个。）

<svg 
    width=50mm
    height=25mm
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
>
    <g>
        <text
            x=0
            y=55
            font-family="Verdana"
            font-size=55
            fill="black"
        >NOS?</text>
        <line
            class='v_pos'
            stroke="green"  
            x1=0 
            y1=55 
            x2=500
            y2=55
            stroke-width="1"  
        />
    </g>
</svg>

如何在浏览器中实现500x250像素大小？比例不会改变，但我也需要在网络浏览器中使用固定的画布大小。

我需要改写/扩展问题：

我想将图形（在浏览器中创建）导出到CorelDraw，因为它可以读取SVG文件。浏览器中的画布例如是500x250px，并且每个对象首先以像素为单位进行测量。导出后，所有内容都必须存在，从画布开始（到50x25mm），然后是对象：

I need to set this

所以问题是：

witch属性负责CorelDraw中的画布宽度和高度？
是否有任何快速方式（preserveAspectRatio，viewBox，样式媒体）调整包含对象的大小，或者我必须逐个转换每个对象的宽度，高度，x，y等属性？

感谢您的任何建议！

Answer 1

SVG图像有两个不同的 size 方面：您希望从无限画布中看到多少，以及生成的图像应该有多大。第一个是由viewBox定义的，其中包含左上角的 x 和 y 坐标，以及 width 和身高。第二个是使用width和height属性或样式属性定义的。

因此，您使用viewBox属性表示您对(0px, 0px)和(500px, 250px)矩形内的区域感兴趣，因为这是您在浏览器中看到的内容：{ {1}}

然后，由于您希望图像显示为viewBox="0 0 500 250"宽且50mm高，因此您可以相应地设置宽度和高度。您可以将它们设置为根svg元素上的属性，这意味着您必须仅在导出时设置它们，否则它们也将在浏览器中应用，或者您可以使用25mm设置它们元素仅对style媒体有效。

对于浏览器，如果您定义print，则不需要明确指定宽度和高度，因为默认情况下，viewBox中定义的区域以像素为单位显示。

Answer 2

处理不同的媒体时，请使用样式表媒体选择器。 SVG使用<style>元素的media attribute原生支持。基本语法是：

<style media="something" type="text/css">
  svg:root {
    width: 50mm;
    height: 25mm; 
  }
</style>

现在，根据您的目的，您可以：

使用media="print"指定打印介质的尺寸，在所有其他情况下使用根<svg>元素上设置的属性中指定的默认宽度和高度
使用media="screen"指定浏览器在使用屏幕时显示的目标宽度和高度，其中屏幕为defined：＆＃34;主要用于彩色电脑屏幕＆＃34;。

如何设置svg打印（以mm为单位表示CorelDraw）和实际/预览（以px为单位）？

2 个答案: