1

我有一个基本的 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）开始，然后是对象：

我需要设置这个

所以问题是：

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

感谢您的任何建议！

4

2 回答 2

2

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

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

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

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

于 2012-08-28T16:48:07.443 回答
0

当处理不同的媒体时，使用样式表媒体选择器。并且 SVG 使用元素的media属性本机地支持这一点。<style>基本语法是：

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

现在，根据您想做什么，您可以：

  1. 用于media="print"指定打印介质的大小，让在根<svg>元素上设置的属性中指定的默认宽度和高度用于所有其他情况
  2. 用于在使用屏幕media="screen"显示时为浏览器指定目标宽度和高度，其中屏幕定义为：“主要用于彩色计算机屏幕”。
于 2012-08-27T22:15:29.720 回答