我有这个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;这是一张图表,我想与更大的“画板”一起使用。我的意思是,我想画我的...
它会自动放大和缩小。