生成的图没办法水平居中啊

[lovelyJason]

Describe the bug
svg元素和他的父元素宽度是一致，设置flex或者margin: 0 auto都没办法水平居中;
Screenshot

How to reproduce

<div class="posts-chart" style="width: 800px;">
    <svg class="line-chart"></svg>
</div>

const svg = document.querySelector('.posts-chart .line-chart');
// chartXkcd.Line 创建一个折线图
const lineChart = new chartXkcd.Line(svg, {
    //图表的标题
    title: '文章归档统计图',
    // 图表的 x 标签
    xLabel: '日期',
    // 图表的 y 标签
    yLabel: '文章篇数',
    // 需要可视化的数据
    data: {
        // x 轴数据
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        // y 轴数据
        datasets: [{
            // 第二组数据
            label: '篇数',
            data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
        }],
    },
    // 可选配置以自定义图表的外观
    options: {
        // 自定义要在 y 轴上看到的刻度号（默认为 3）
        yTickCount: 3,
        // 指定要放置图例的位置
        legendPosition: chartXkcd.config.positionType.upLeft
    }
});

Additional context
Add any other context about the problem here.

[timqian]

可以参考下 star-history 是怎么居中的：https://star-history.com/#star-history/star-history&Date

[lovelyJason]

可以参考下 star-history 是怎么居中的：https://star-history.com/#star-history/star-history&Date

嗯是我设错了样式， 目前好像是宽高无法定义的问题， 好像是固定比例4/3