展开视图框以获取更多绘图区域,并且SVG不会按比例缩小以适合容器

问题描述 投票:0回答:1

我有这个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>

我有这个svg元素,需要在屏幕上呈现为:width:1200px;高度:400px;这是一张图表,我想与更大的“画板”一起使用。我的意思是,我想画我的...

html css svg styled-components
1个回答
0
投票

它会自动放大和缩小。

© www.soinside.com 2019 - 2024. All rights reserved.