transform scale只缩小文字 不缩小空间

`transform: scale()` 可以同时缩放元素的大小以及内部的文字大小，如果你只想缩小文字而不影响元素的大小，可以考虑使用 `font-size` 属性来控制文字的大小，例如：

.element {
  transform: scale(0.5); /* 缩小元素的大小 */
  font-size: 0.5em; /* 缩小文字的大小 */
}

这样就可以保持元素的空间大小不变，只缩小了文字大小。

相关问题

transform scale 缩小文字后偏移位置，文字对父元素不能水平居中

如果使用 transform scale 缩放文字后导致文字偏移，同时又想让缩放后的文字水平居中，可以尝试使用以下方法：

1. 使用 position 和 transform 属性

可以设置父元素为相对定位，然后将文字设置为绝对定位，再通过 transform 属性进行缩放。最后通过 left 和 top 属性进行微调，使文字水平和垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

2. 使用 display 和 text-align 属性

可以设置父元素为 flex 布局，让子元素水平和垂直居中，然后再通过 transform 缩放文字。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  transform: scale(0.5);
}

这两种方法都可以解决文字缩放后偏移的问题，并且让文字水平和垂直居中。

Svg transform scale

SVG transform scale是一种SVG变换方法，它可以通过缩放元素的大小来调整其外观。

使用scale()函数可以实现SVG transform scale，语法如下：

transform: scale(sx[, sy])

其中，sx和sy是两个必需的参数，表示水平和垂直方向的缩放比例。如果只指定sx，则sy将默认与sx相同。

例如，要将一个元素放大到原来的两倍，可以这样写：

transform: scale(2);

如果要将元素沿水平方向缩小一半，可以这样写：

transform: scale(0.5, 1);

需要注意的是，SVG transform scale会影响元素的位置和尺寸，并且会影响元素内部的所有内容。因此，在使用SVG transform scale时需要特别小心，以免产生意想不到的效果。