html - 不能在 svg 的中心制作 g

Question

你好 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>

请帮我解决这个问题，以便我以后知道。

Answer 1

SVG 不是这样工作的。 SVG 没有像 HTML 那样的自动布局。将它想象成一个绘图程序 - 您必须告诉它在哪里绘制所有内容。

width: auto、margin 等 HTML 样式属性也不适用于 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>