SVG: как использовать логарифмическую шкалу

Question

Я использую SVG для создания гистограммы, используя прямоугольники. Я хочу знать, как указать логарифмическую шкалу. Мое исследование обнаруживает несколько ссылок, касающихся масштаба журнала с диаграммами SVG, но ни одна из них не показывает, как это указано. У SVG есть атрибут «scale», но он этого не делает.

Вот HTML-код:

<figure>
  <figcaption>A sample graph</figcaption>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="1000"   height="150" aria-labelledby="title" role="img">

  <title id="title">A bar chart showing information</title>
  <g class="bar">
    <rect width="40" height="19"></rect>
    <text x="45" y="9.5" dy=".35em">FirstItem</text>
  </g>

  <g class="bar">
    <rect width="230" height="19" y="40"></rect>
    <text x="235" y="48" dy=".35em">SecondItem</text>
  </g>

</svg>
</figure>

Вот код CSS:

.bar {
  fill: green;
  height: 21px;
  transition: fill .3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif;
}
.bar text {
  fill: #555;
}

.chart:hover .bar,
.chart:focus .bar {
  fill: #aaa;
}

.bar:hover,
.bar:focus {
  fill: blue;
}
.bar:hover text,
.bar:focus text {
  fill: blue;
}

figcaption {
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

Мой вопрос заключается в том, как указать логарифмическую шкалу в приведенном выше коде. Большое спасибо за любую помощь.