SVG стили с абсолютными единицами

Question

В приложении для черчения я изучаю использование SVG и не могу понять, как единицы длины применяются к стилям.

В этом примере ширина и высота элемента SVG даны в дюймах, а прямоугольник и текст правильно расположены в этих пользовательских единицах, но атрибуты стиля font-size и stroke-width не работают, как я ожидаю с единицами измерения .

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

Каждый размер, который вы определяете, является размером в локальной системе координат.Относительный размер в пикселях и дюймах остается неизменным , зависящее от устройства число в каждой локальной системе координат, которую вы устанавливаете:

единицы абсолютной длины являются фиксированнымипо отношению друг к другу и привязаны к некоторому физическому измерению.Абсолютные единицы измерения: физические единицы (дюймы, см, мм, pt, pc, q) и единица измерения угла обзора (px)

Смущает то, что при написании размеров в таблицах стилей CSS вам иногда приходится использовать единицу, даже если это «px». Это не пиксель экрана , а единица локальной системы координат, которую вы бы использовали без идентификаторов единиц в атрибутах:

Обратите внимание, что при инициализации пользовательская единица вНачальная система координат эквивалентна понятию px в родительской среде.Таким образом ... поскольку часто система координат родителя совпадает с сеткой пикселей устройства, "5px" может фактически отображаться на 5 пикселей устройства.Однако, если есть какое-либо преобразование системы координат из-за использования атрибутов transform или viewBox, потому что "5px" отображается на 5 пользовательских единиц и потому что преобразования системы координат привели к пересмотренной пользовательской системе координат, "5px"скорее всего, не будет отображаться до 5 пикселей устройства.В результате в большинстве случаев единицы измерения «px» не будут отображаться в пиксельную сетку устройства.

Единственное разумное отношение, которое вы можете установить, - это записывать все внутри SVG в абстрактных единицах (добавляя «px ", чтобы соответствовать правилам CSS, если это необходимо), а затем установите ширину / высоту SVG в дюймах.

После этого вы должны вычислить для себя: 1 единица видового экрана в приведенном ниже примере сопоставлена ​​с 0,01в, таким образом, размер шрифта 10px равен 0.1in, внутри масштабированной группы он равен 0.5in, поэтому вам придется использовать размер шрифта 2px, чтобы получить тот же размер в реальном мире.

(Не используйте очень маленькие размеры viewBox. Вы столкнетесь с ошибками .)

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>