首页 文章

具有绝对单位的SVG样式

提问于
浏览 次
0

对于绘图应用程序，我正在探索使用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英寸”并且无论视口和坐标系统如何都能正常工作 . ）

谢谢！

css svg

1 回答

  • 1

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

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

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

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

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

    在那之后，你必须自己计算：下面例子中的1个视口单元被映射到0.01in，所以10px的字体大小相当于0.1in，在缩放组中它等于0.5in，所以你必须使用字体大小为2px，最终具有相同的真实世界大小 .

    （不要使用非常小的viewBox大小 . 你会遇到bugs . ）

    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;
}

    <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>
    回复于

相关问题