dyesub-tool/dyesub/templates/document.xml

<svg version="1.1"
     width="{{ dimensions.width }}" height="{{ dimensions.height }}"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css"><![CDATA[@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');]]></style>
  </defs>
  {% let u = SVGMeasure::new(14.0, SVGUnit::Millimeter) %}
  {% let padding = SVGMeasure::new(2.5, SVGUnit::Millimeter) %}
  {% let dy = "0.125em" %}
  {% for key in keyboard.keys %}
    {% let x = u * key.x + padding * key.x + dimensions.margin %}
    {% let y = u * key.y + padding * key.y + dimensions.margin %}
    {% let width = u * key.width %}
    {% let height = u * key.height %}
    <g x="{{ x }}" y="{{ y }}" transform="translate({{ x.to_user_units() }},{{ y.to_user_units() }})" width="{{ width }}" height="{{ height }}">
      <rect width="{{ width }}" height="{{ height }}" fill="none" stroke="#cccccc" stroke-width="1pt" rx="2mm" />

      {# top-left #}
      {% if let Some(legend) = key.legends[0] %}
        <text x="{{ width * 0.25 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# top-center #}
      {% if let Some(legend) = key.legends[1] %}
        <text x="{{ width * 0.5 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# top-right #}
      {% if let Some(legend) = key.legends[2] %}
        <text x="{{ width * 0.75 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# middle-left #}
      {% if let Some(legend) = key.legends[3] %}
        <text x="{{ width * 0.25 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# middle-center #}
      {% if let Some(legend) = key.legends[4] %}
        <text x="{{ width * 0.5 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# middle-right #}
      {% if let Some(legend) = key.legends[5] %}
        <text x="{{ width * 0.75 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# bottom-left #}
      {% if let Some(legend) = key.legends[6] %}
        <text x="{{ width * 0.25 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# bottom-center #}
      {% if let Some(legend) = key.legends[7] %}
        <text x="{{ width * 0.55 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# bottom-right #}
      {% if let Some(legend) = key.legends[8] %}
        <text x="{{ width * 0.75 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ legend.size|kle_font_units }}" dy="{{ dy }}">{{ legend.text }}</text>
      {% endif %}

      {# TODO 9-11 are side #}
    </g>
  {% endfor %}
</svg>