Question

对于绘图应用程序，我正在探索使用SVG并且无法理解长度单位如何应用于样式。

在此示例中，SVG元素的宽度和高度以英寸为单位，矩形和文本在这些用户单位中正确定位，但字体大小和笔触宽度样式属性不能像我期望的那样使用单位

text.labela {
  fill: green;
  font-family: sans-serif;
  font-size: 0.1in;
  stroke: none;
  text-anchor: middle;
}

text.labelb {
  fill: red;
  font-family: sans-serif;
  font-size: 0.1px;
  stroke: none;
  text-anchor: middle;
}

rect.box {
  fill: none;
  stroke: black;
  stroke-width: 0.01in;
}

<svg width="4in" height="4in" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect class="box" x="0" y="0" width="4" height="4" />
      <text class="labela" x="2" y="3">a</text>
      <text class="labelb" x="2" y="2">b</text>
</svg>

为了获得0.1英寸宽线和0.1英寸高度的文字，我该怎么办？

（在我的实际应用中，有嵌套的坐标系，所以我真的希望能够指定“0.1英寸”并且无论视口和坐标系统如何都能正常工作。）

谢谢！

Answer 1

您定义的每个尺寸都是局部坐标系中的尺寸。您建立的每个本地坐标系中px和英寸remains the same的相对大小，与设备相关的数字：

绝对长度单位相对于彼此固定并锚定到某些物理测量。绝对单位由物理单位（in，cm，mm，pt，pc，q）和视角单位（px）
组成

令人困惑的是，在CSS样式表中编写大小，有时候你被迫使用一个单元，即使它是＆＃34; px＆＃34;。 That is not a screen pixel，但您将在属性中使用没有单位标识符的本地坐标系的单位：

请注意，在初始化时，初始坐标系中的用户单位等同于父环境的px单位概念。因此......因为父母的坐标系经常与设备像素网格对齐，＆＃34; 5px＆＃34;可能实际上映射到5个设备像素。但是，如果由于使用transform或viewBox属性而导致任何坐标系转换，因为＆＃34; 5px＆＃34;映射到5个用户单元，并且因为坐标系转换导致修改的用户坐标系，＆＃34; 5px＆＃34;可能不会映射到5个设备像素。因此，在大多数情况下，＆＃34; px＆＃34;单位不会映射到设备像素网格。

您可以建立的唯一明智的关系是以抽象单位在SVG中编写所有内容（如果需要，添加＆＃34; px＆＃34;以满足CSS规则），然后以英寸为单位设置SVG的宽度/高度

之后，你必须自己计算：下面例子中的1个视口单元被映射到0.01in，所以10px的字体大小相当于0.1in，在缩放组中它等于0.5in，所以你会必须使用2px的字体大小才能以相同的实际大小结束。

（不要使用非常小的viewBox大小。您将遇到bugs。）

＆＃13;

text.labela {
  fill: green;
  font-family: sans-serif;
  font-size: 10px;
  stroke: none;
  text-anchor: middle;
}

text.labelb {
  fill: red;
  font-family: sans-serif;
  font-size: 0.2in;
  stroke: none;
  text-anchor: middle;
}

.box {
  fill: none;
  stroke: black;
  stroke-width: 0.5;
}

＆＃13;

<svg width="4in" height="4in" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect class="box" x="0" y="0" width="400" height="400" />
      <line class="box" x1="0" y1="100" x2="400" y2="100" />
      <line class="box" x1="0" y1="90" x2="400" y2="90" />
      <line class="box" x1="0" y1="200" x2="400" y2="200" />
      <line class="box" x1="0" y1="150" x2="400" y2="150" />
      <text class="labela" x="150" y="100">ab</text>
      <text class="labelb" x="250" y="100">ab</text>
      <g transform="scale(5)">
           <text class="labela" x="30" y="40">ab</text>
           <text class="labelb" x="50" y="40">ab</text>
      </g>
</svg>

＆＃13;

具有绝对单位的SVG样式

1 个答案: