如何使响应式 SVG 图像居中？ [复制]

Posted 2023-03-06

【中文标题】如何使响应式 SVG 图像居中？ [复制]

【英文标题】：How do I center a responsive SVG image? [duplicate]

【发布时间】：2017-05-27 18:38:42

【问题描述】：

我正在尝试在它的容器内水平对齐这个 SVG（在这种情况下，它可以是任何 div、body 或其他任何东西。）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content">
            <g fill="none" fill-rule="evenodd" transform="">
                <ellipse cx="442.5" cy="5.5" fill="#172A3A" rx="5.5" ry="5.5"></ellipse>
                <path stroke="#172A3A" d="M806.88 69.082v-4.68c0-12.692-10.29-22.98-22.982-22.98h-316.59c-9.558 0-18.64.828-24.868-6.422-6.228 7.25-15.31 6.42-24.87 6.42H100.983C88.29 41.42 78 51.71 78 64.403v4.68M442.5 11v55.5"></path>
                <ellipse cx="78.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="443.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="78.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <ellipse cx="443.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="69.177" y="117">72</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="27.471" y="183">Investments</tspan>
                </text>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="433.39" y="117">30</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="350.356" y="183">Succesful Trade Sales</tspan>
                </text>
                <ellipse cx="807.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="807.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                    <tspan x="800.749" y="117">13</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                    <tspan x="793.588" y="182.003">IPOs</tspan>
                </text>
            </g>
        </svg>

【问题讨论】：

类似jsfiddle.net/dtjz225o 的东西？请注意，您的图形当前不在视口中居中。这可能会混淆“居中”的看法。

【参考方案1】：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 868 190" preserveAspectRatio="xMidYMid slice" class="svg-content">
        <g fill="none" fill-rule="evenodd" transform="">
            <ellipse cx="442.5" cy="5.5" fill="#172A3A" rx="5.5" ry="5.5"></ellipse>
            <path stroke="#172A3A" d="M806.88 69.082v-4.68c0-12.692-10.29-22.98-22.982-22.98h-316.59c-9.558 0-18.64.828-24.868-6.422-6.228 7.25-15.31 6.42-24.87 6.42H100.983C88.29 41.42 78 51.71 78 64.403v4.68M442.5 11v55.5"></path>
            <ellipse cx="78.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
            <ellipse cx="443.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
            <ellipse cx="78.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
            <ellipse cx="443.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
            <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="69.177" y="117">72</tspan>
            </text>
            <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="27.471" y="183">Investments</tspan>
            </text>
            <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="433.39" y="117">30</tspan>
            </text>
            <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="350.356" y="183">Succesful Trade Sales</tspan>
            </text>
            <ellipse cx="807.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
            <ellipse cx="807.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
            <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                <tspan x="800.749" y="117">13</tspan>
            </text>
            <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                <tspan x="793.588" y="182.003">IPOs</tspan>
            </text>
        </g>
    </svg>


    <style>
     svg 
     display: block;
     margin: 0 auto;
     max-width: 1320px;
     
    </style>

【讨论】：

你能不能给个赞

【参考方案2】：

同样的问题here。

SVG 默认是内联的。将display: block 添加到其中，然后margin: auto 将按预期工作。