HTML – 不能让g在svg的中心

Hello Stackoverflow社区.我需要帮助,我正在尝试在svg标签的中心制作g标签,但我不能.我已经尝试将margin 0设为auto,但仍然是相同的.我该如何解决这个问题,这是我的jsfiddle完整代码： https://jsfiddle.net/mky4qqvd/

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
                <style type="text/css">

                        text {
                            filter: url(#filter);
                            fill: black;
                            font-family: "Cinzel",serif;
                            font-size: 100px;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                        }

                </style>
                <g style="
    /* width: 100%; */
    width: auto;
">
                    <text x="0" y="100">Swinger</text>
                </g>
                </svg>

请帮我解决这个问题,以便将来知道.

解决方法

SVG无法正常工作. SVG没有像HTML这样的自动布局.把它想象成一个绘图程序 – 你必须告诉它在哪里画一切.

此外,HTML样式属性(如width：auto,margin等)也不适用于SVG.

SVG确实能够将文本水平居中于SVG中的特定位置.而你也可以垂直居中(种类).

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
    <style type="text/css">

        text {
            fill: black;
            font-family: "Cinzel",serif;
            font-size: 100px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-anchor: middle;
            alignment-baseline: middle;
        }

    </style>
    <g>
        <text x="300" y="50">Swinger</text>
    </g>
</svg>