Html 在不使用javascript的情况下从CSS更改SVG视口大小

我只使用HTML和CSS创建了一个非常简单的SVG文本块：

<div class="wrapper logo">
  <svg viewBox="0 0 225 80" class="logo-prompt">
    <text x="0" y="65">first</text>
  </svg>
  <svg viewBox="0 0 45 80" class="logo-category">
    <text x="0" y="65">test</text>
  </svg>
  <svg viewBox="0 0 45 80" class="logo-cursor">
    <text x="0" y="65">_</text>
  </svg>
</div>

除了中间的文本元素（当前为

test

）需要能够通过改变viewBox来改变长度之外，这种方法工作得很好。我使用的是单空格字体，因此我知道每个字符都会在W viewBox的水平长度上增加45个字符，因此对于4个字符的示例，它应该与设置

viewBox=“0 0 180 80”

一样简单

我尝试过使用

transform:scaleX（4），正如在堆栈溢出的其他地方所建议的，但这不起作用，因为它只是拉伸svg，而不是改变viewBox，从而改变纵横比

我的困难在于我不知道前面的大小，所以我希望能够使用css变量实现这一点，我认为这很简单，但设置“viewBox:”0 180 80“似乎不是有效的css

有没有办法在css中设置viewBox的大小？
我可以看到两种方法来解决这个问题。第一个是根本没有
viewBox
属性

<svg>
  <text x="0" y="65">test</text>
</svg>

svg {
  width: calc(var(--letter-count) * 40px);
  height: 80px;
}


测试
svg{
宽度：计算值（var（--字母计数）*40px）；
高度：80px；
}

这是以SVG不再具有响应性为代价的

第二种解决方案看起来有点老套，但很有效：

<svg viewBox="0 0 45 80" preserveAspectRatio="xMinYMid meet">
  <text x="0" y="65">test</text>
</svg>

svg {
  overflow: visible;
  width: calc(var(--letter-width) * var(--letter-count));;
  height: 100%;
}


测试
svg{
溢出：可见；
宽度：计算值（变量（--字母宽度）*变量（--字母计数））；；
身高：100%；
}

preserveAspectRatio
值用于确保文本始终从左侧开始。您需要将
width
设置为一个值，该值在右侧留出足够的空间，以便文本可以进入。如果SVG被缩放，您的CSS将不得不相应地调整
--letter width
变量。
我可以看到两种方法来解决这个问题。第一个是根本没有
viewBox
属性

<svg>
  <text x="0" y="65">test</text>
</svg>

svg {
  width: calc(var(--letter-count) * 40px);
  height: 80px;
}


测试
svg{
宽度：计算值（var（--字母计数）*40px）；
高度：80px；
}

这是以SVG不再具有响应性为代价的

第二种解决方案看起来有点老套，但很有效：

<svg viewBox="0 0 45 80" preserveAspectRatio="xMinYMid meet">
  <text x="0" y="65">test</text>
</svg>

svg {
  overflow: visible;
  width: calc(var(--letter-width) * var(--letter-count));;
  height: 100%;
}


测试
svg{
溢出：可见；
宽度：计算值（变量（--字母宽度）*变量（--字母计数））；；
身高：100%；
}

preserveAspectRatio
值用于确保文本始终从左侧开始。您需要将
width
设置为一个值，该值在右侧留出足够的空间，以便文本可以进入。如果SVG被缩放，CSS必须相应地调整
--字母宽度
变量。
不，没有。viewBox是一个属性，CSS属性不会影响属性。不，没有。viewBox是一个属性，CSS属性不会影响属性。