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

我的问题是如何在上面的代码中指定对数标度。非常感谢您的帮助。