如何修改 <g> （SVG 元素）的大小？答案

【问题标题】：How to modify the size of a <g> (SVG element)?如何修改 <g> （SVG 元素）的大小？
【发布时间】：2022-02-10 15:54:31
【问题描述】：

我似乎无法成功修改在 recharts 图中呈现为 X 轴的元素的大小。我希望它是 20px 的高度和宽度。我什至无法通过在控制台 css 中对元素进行修改来成功。谁能帮帮我？

这是元素：

    <svg
          style={{ cursor: 'pointer',  }} width="20px" height="20px"
        >
          <g transform={`translate(10,10)`} fill="green" stroke="green">
            <path
              fill="current"
              fillRule="evenodd"
              d="M8,0 C3.58862306,0 0,3.58862306 0,8 C0,12.4113769 3.58862306,16 8,16 C12.4113769,16 16,12.4113769 16,8 C16,3.58862306 12.4113769,0 8,0 Z M12.0546875,6.3046875 L7.72131347,10.6379394 C7.59130859,10.7679443 7.42065431,10.833374 7.25,10.833374 C7.07934569,10.833374 6.90869141,10.7679443 6.77868653,10.6379394 L4.61206056,8.47131347 C4.35131837,8.21069338 4.35131837,7.78930663 4.61206056,7.52868653 C4.87268066,7.26794434 5.29394531,7.26794434 5.5546875,7.52868653 L7.25,9.22399903 L11.1120606,5.36206056 C11.3726807,5.10131837 11.7939453,5.10131837 12.0546875,5.36206056 C12.3153076,5.62268066 12.3153076,6.04394531 12.0546875,6.3046875 Z"
              transform="translate(.5)"
            />
          </g>
        </svg>

【问题讨论】：

既然整个 SVG 是 g 为什么不调整 SVG 的大小。请提供一个minimal reproducible example 这不起作用。
@Paulie_D 我刚刚添加了一个 sn-p 以使其更清晰。我尝试更改 svg 的大小，但没有成功
对我有用的是您在 CSS 中指定尺寸而不是样式标签
@Paulie_D 我似乎无法让它工作
您可以在 svg 元素中添加一个 viewBox。例如

标签： css svg recharts

【解决方案1】：

正如 @enxaneta 建议的那样，像 viewBox="-0.5 -0.5 17 17" 这样的负 viewBox 偏移量是一种直接的解决方案。

或者，您可以像这样缩放<g>（或您的路径）：

.svg{
  display:inline-block;
  width:10em;
  border: 1px solid #ccc
}

<svg class="svg" viewBox="0 0 16 16">
  <g transform="scale(0.94117647)" transform-origin="8 8" stroke-width="1" fill="green" stroke="green">
    <path  d="M8,0 C3.58862306,0 0,3.58862306 0,8 C0,12.4113769 3.58862306,16 8,16 C12.4113769,16 16,12.4113769 16,8 C16,3.58862306 12.4113769,0 8,0 Z M12.0546875,6.3046875 L7.72131347,10.6379394 C7.59130859,10.7679443 7.42065431,10.833374 7.25,10.833374 C7.07934569,10.833374 6.90869141,10.7679443 6.77868653,10.6379394 L4.61206056,8.47131347 C4.35131837,8.21069338 4.35131837,7.78930663 4.61206056,7.52868653 C4.87268066,7.26794434 5.29394531,7.26794434 5.5546875,7.52868653 L7.25,9.22399903 L11.1120606,5.36206056 C11.3726807,5.10131837 11.7939453,5.10131837 12.0546875,5.36206056 C12.3153076,5.62268066 12.3153076,6.04394531 12.0546875,6.3046875 Z" ></path>
  </g>
</svg>

编辑：正确的缩放值

正如@Carsten Massmann 指出的那样：
比例因子0.94117647是
的结果 16/17（原始svg宽度/svg宽度+笔画宽度）

transform-origin="8 8" 确保我们从 viewBox 的中心进行缩放。

另一种解决方法可能是将溢出设置为可见以避免任何裁剪：

.svg{
  display:inline-block;
  width:10em;
  border: 1px solid #ccc
}

<svg overflow="visible" class="svg" viewBox="0 0 16 16">
    <path  stroke-width="1" fill="green" stroke="green" d="M8,0 C3.58862306,0 0,3.58862306 0,8 C0,12.4113769 3.58862306,16 8,16 C12.4113769,16 16,12.4113769 16,8 C16,3.58862306 12.4113769,0 8,0 Z M12.0546875,6.3046875 L7.72131347,10.6379394 C7.59130859,10.7679443 7.42065431,10.833374 7.25,10.833374 C7.07934569,10.833374 6.90869141,10.7679443 6.77868653,10.6379394 L4.61206056,8.47131347 C4.35131837,8.21069338 4.35131837,7.78930663 4.61206056,7.52868653 C4.87268066,7.26794434 5.29394531,7.26794434 5.5546875,7.52868653 L7.25,9.22399903 L11.1120606,5.36206056 C11.3726807,5.10131837 11.7939453,5.10131837 12.0546875,5.36206056 C12.3153076,5.62268066 12.3153076,6.04394531 12.0546875,6.3046875 Z" ></path>
</svg>

注意事项：您的图标将显示得比原始设计大，并且在与其他符合 16x16 边界的元素一起使用时可能会导致布局不一致。

【讨论】：

感谢这些非常有趣的观点！我只是多玩了一点，并意识到缩放因子确实应该是 16/17 = 0.94117647（而不是 0.9375），因为带有 stroke-width="1" 的图标的总大小将是 16+1 并且需要缩小到16.
@Carsten Massmann：感谢您的检查！我修改了答案。
感谢大家，这个小问题把我逼疯了！它完美地工作@herrstrietzel

【解决方案2】：

如果对您有用，我发现 svg 与您的相似，并演示了如何添加样式

svg {
 background: #479840;
 border-radius: 50%;
}
path {
 filter: invert(99%) sepia(99%) saturate(2%) hue-rotate( 205deg) 
       brightness(110%) contrast(100%);
}

<svg height="44" viewbox="0 0 24 24" width="44" xmlns="http://www.w3.org/2000/svg">
<path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>

【讨论】：