html - 如何使用计数器设置变换属性

我正在使用CSS样式化SVG元素。我正在尝试使用counter来在单独的行上绘制text：

<!DOCTYPE html>
<html>
<head>
<style>
.step-100 {
    counter-reset: items-counter 15;
}

.step-100 text {
    counter-increment: items-counter 20;
    transform: translate(0px, counter(items-counter));
    fill: red;
}

</style>
</head>
<body>
<svg>
  <g class=step-100>
    <text>A</text>
    <text>B</text>
    <text>C</text>
  </g>
</svg>
</body>
</html>

但不幸的是，translate(0px, counter(items-counter))似乎不是有效的表达方式。

设置y: counter(items-counter);也无济于事。

我该如何解决？

如何使用计数器设置变换属性

0 个答案: