img/num12.svg

<svg xmlns="http://www.w3.org/2000/svg" class="gnu"
    viewBox="0 60 900 60">
    <!-- viewBox="60 60 780 240"> -->

  <!--
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
      href="kb_style.css" type="text/css"/>
  -->

  <style>
    rect {
      stroke: #666;
      stroke-width: .5px;
      fill: #fff;
    }
    .specialKey,
    .specialKey rect {
      fill: #e4e4e4;
    }
    text {
      fill: #333;
      font: normal 20px sans-serif;
      text-align: center;
    }

    #row_AD { transform: translate(64px,  64px); }
    #row_AC { transform: translate(64px, 124px); }
    #row_AB { transform: translate(64px, 184px); }
    #row_AA { transform: translate(64px, 244px); }

    /* .left   { transform: translate(-15px, 0); } */
    /* .right  { transform: translate(+15px, 0); } */

    .specialKey .win,
    .specialKey .gnu {
      font-size: 14px;
    }
    .specialKey .win,
    .specialKey .mac,
    .specialKey .gnu {
      display: none;
    }
    .mac .specialKey .mac,
    .gnu .specialKey .gnu,
    .win .specialKey .win { display: block; }

    .level3, .level4 { fill: green; }

    .deadKey {
      font-size: 16px;
      transform: translateY(-3px);
    }
    .diacritic {
      font-size: 24px;
      font-weight: bolder;
      transform: translateY(8px);
    }
  </style>

  <g id="row_AD">
    <g transform="translate(30)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">1</text>
        <text x="12.8" y="20.6" class="level2">!</text>
        <text x="38.0" y="43.4" class="level3">¡</text>
        <text x="38.0" y="20.6" class="level4">„</text>
      </g>
    </g>
    <g transform="translate(90)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">2</text>
        <text x="12.8" y="20.6" class="level2">@</text>
        <text x="38.0" y="43.4" class="level3">«</text>
        <text x="38.0" y="20.6" class="level4">“</text>
      </g>
    </g>
    <g transform="translate(150)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">3</text>
        <text x="12.8" y="20.6" class="level2">#</text>
        <text x="38.0" y="43.4" class="level3">»</text>
        <text x="38.0" y="20.6" class="level4">”</text>
      </g>
    </g>
    <g transform="translate(210)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">4</text>
        <text x="12.8" y="20.6" class="level2">$</text>
        <text x="38.0" y="43.4" class="level3">£</text>
        <text x="38.0" y="20.6" class="level4">¢</text>
      </g>
    </g>
    <g transform="translate(270)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">5</text>
        <text x="12.8" y="20.6" class="level2">%</text>
        <text x="38.0" y="43.4" class="level3">€</text>
        <text x="38.0" y="20.6" class="level4">‰</text>
      </g>
    </g>
    <g transform="translate(330)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">6</text>
        <text x="12.8" y="20.6" class="level2">^</text>
        <text x="38.0" y="43.4" class="level3">¥</text>
        <text x="38.0" y="20.6" class="level4"> </text>
      </g>
    </g>
    <g transform="translate(390)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">7</text>
        <text x="12.8" y="20.6" class="level2">&amp;</text>
        <text x="38.0" y="43.4" class="level3">¤</text>
        <text x="38.0" y="20.6" class="level4"> </text>
      </g>
    </g>
    <g transform="translate(450)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">8</text>
        <text x="12.8" y="20.6" class="level2">*</text>
        <text x="38.0" y="43.4" class="level3">§</text>
        <text x="38.0" y="20.6" class="level4"> </text>
      </g>
    </g>
    <g transform="translate(510)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">9</text>
        <text x="12.8" y="20.6" class="level2">(</text>
        <text x="38.0" y="43.4" class="level3">¶</text>
        <text x="38.0" y="20.6" class="level4"> </text>
      </g>
    </g>
    <g transform="translate(570)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">0</text>
        <text x="12.8" y="20.6" class="level2">)</text>
        <text x="38.0" y="43.4" class="level3">°</text>
        <text x="38.0" y="20.6" class="level4"> </text>
      </g>
    </g>
    <g transform="translate(630)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">-</text>
        <text x="12.8" y="20.6" class="level2">_</text>
        <text x="38.0" y="43.4" class="level3">—</text>
        <text x="38.0" y="20.6" class="level4">–</text>
      </g>
    </g>
    <g transform="translate(690)">
      <rect width="52" height="52" rx="5" ry="5"/>
      <g class="key" text-anchor="middle">
        <text x="12.8" y="43.4" class="level1">=</text>
        <text x="12.8" y="20.6" class="level2">+</text>
        <text x="38.0" y="43.4" class="level3">≠</text>
        <text x="38.0" y="20.6" class="level4">±</text>
      </g>
    </g>
  </g>

</svg>