扩展视图框以获得更多绘图区域，并且 SVG 不会缩小以适应容器

Posted 2023-03-16

【中文标题】扩展视图框以获得更多绘图区域，并且 SVG 不会缩小以适应容器

【英文标题】：Expanding viewbox to get more drawing area and SVG is NOT scaling back down to fit container

【发布时间】：2020-04-09 05:48:27

【问题描述】：

我有这个 svg 元素，我需要在屏幕上渲染为：

width: 1200px;
height: 400px;

这是一个图表，我想与更大的“艺术板”一起工作。

我的意思是，我想在12000 x 4000 units 的空间中绘制我的形状。

我有什么：

LS.Chart_DIV = styled.div`
  width: 1200px;
  height: 400px;
`;

LS.Chart_SVG = styled.svg`
  border: 1px solid silver;
  width: 100%;
  height: 100%;
`;

RETURN STATEMENT

<LS.Chart_DIV>
  <LS.Chart_SVG viewbox="0 0 1200 400" ref=svgElement_ref>
    lineItems
    barItems
  </LS.Chart_SVG>
</LS.Chart_DIV>

通过上面的代码，我可以使用 1200x400 坐标绘制图表。但是我有很多元素，要在那个空间内绘图，我最终会使用小数。例如：我的一个形状的宽度将是 1.2 磅，而不是 12 磅（如果我能够将绘图空间扩大 10 倍至 12000 x 4000，我会得到这样的宽度）。

如果尝试我将代码更改为：

RETURN STATEMENT

<LS.Chart_DIV>
  <LS.Chart_SVG viewbox="0 0 12000 4000" ref=svgElement_ref>
    lineItems
    barItems
  </LS.Chart_SVG>
</LS.Chart_DIV>

我在这个新参考 (12000 x 4000) 上绘制我的形状。它可以工作（但它会在屏幕上显示 GIANT 并且根本不适合我的 1200px x 400px div。即：它没有缩小。我认为 viewBox 属性会自动缩小 svg 以适应容器。

我该如何解决这个问题？

注意：这个标记是因为我使用的是styled-components。最后<LS.Chart_DIV> 是<div> 而<LS.Chart_SVG> 是<svg>。

【参考方案1】：

它会自动放大和缩小。

错误是viewbox 上的拼写错误，而应该是viewBox，大写B。

现在已经修复了。

RETURN STATEMENT

<LS.Chart_DIV>
  <LS.Chart_SVG viewBox="0 0 12000 4000" ref=svgElement_ref>
    lineItems
    barItems
  </LS.Chart_SVG>
</LS.Chart_DIV>