如何更改 svg (<g>) 高度？答案

【问题标题】：How to change svg (<g>) height?如何更改 svg (<g>) 高度？
【发布时间】：2021-09-01 07:22:22
【问题描述】：

如何更改 g 元素的高度？

height = {params} doesn't want to react

我放弃了在 cmets 中的工作，因为 svg 非常大（Scene.js）

{/* Scale man */}
      <g transform="translate(320,388)" viewBox="0 0 351 450">
        <g transform={`translate(336,0) scale(-1, 1)`}>
          <g transform="translate(30.25,179)">
            <g>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="351"
                height="450"
                viewBox="0 0 351 450"
              >...<

【问题讨论】：

codesandbox.io/s/runtime-mountain-7kb7o?file=/src/…
你想做什么？您在 svg 上有一个高度属性，为什么不调整它。 g 是一个非渲染元素，因此 height 可能不是它的有效属性，它将采用其内容的高度
组的高度取决于它包含的形状。更改组高度的一种方法是在内部添加一个矩形。但是，如果您需要 viewBox，您可能需要在嵌套的 svg 元素中转换组。请编辑您的问题，详细说明您想要实现的目标。
在学习 SVG 的同时，还要学习使用：jakearchibald.github.io/svgomg，因为使用 M123.987862 精度，您可以有效推动 1 百万“设计”像素转换为 1 个屏幕像素.. 一个非常臃肿的 SVG 文件

标签： javascript css reactjs svg

【解决方案1】：

如 cmets 中所述，<g> 不能有 height 或 viewBox 属性。

我假设您正在尝试将 <g> 剪辑到 viewBox。

一种方法是使用<svg> 标签，它确实支持viewBox：（您可能需要将转换移动到子元素中。）

{/* Scale man */}
      <svg transform="translate(320,388)" viewBox="0 0 351 450">
        <g transform={`translate(336,0) scale(-1, 1)`}>
          <g transform="translate(30.25,179)">
            <g>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="351"
                height="450"
                viewBox="0 0 351 450"
              >...<

另一种方法是使用<clipPath> 通过<g clip-path="url(#myClipPath)"> 显式剪辑组。但这更烦人，因为它需要单独定义<clipPath id="myClipPath">。

【讨论】：

【解决方案2】：

您可以对其应用 css 变换并调整比例，直到获得所需的高度。

transform: matrix(scale, 0, 0, scale, 0, 0);

例如：

transform: matrix(1.5, 0, 0, 1.5, 0, 0);

【讨论】：