如何将svg rect和文本向左对齐答案

【问题标题】：How to align svg rect and text to the left如何将svg rect和文本向左对齐
【发布时间】：2021-07-12 07:06:17
【问题描述】：

我在项目中有 SVG 代码，但我正在努力对齐。这是我的 SVG 代码 -

const svgImageOutBound = () => {
            return (
                `<svg width="240" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="16" height="16" rx="8" fill="#C938C4"/>
                    <text x="20" y="15" fill="#777">${i18n.label_out_bound_config_drift}</text>
                </svg>`
            );
        }

在div 代码中使用这个 -

                `<div class="tooltip-header size-20">${
                        : d.configChangeType === "OUT_OF_BAND"
                        ? svgImageOutBound()
                        : i18n.label_in_bound_config_drift
                }</div>`

但这是居中对齐的 -

任何人都遇到过这种情况，请指导我..

【问题讨论】：

你遇到的问题是svg元素width="240" height="18"的纵横比和viewBox不一样：viewBox="0 0 20 20"请试试viewBox="0 0 240 18"

标签： javascript html css svg

【解决方案1】：

我已经更新了 viewBox 和宽度，它工作正常。如果有更好的解决方案，请提出建议。

const svgImageOutBound = () => {
            return (
                `<svg width="240" height="18" viewBox="120 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="16" height="16" rx="8" fill="#C938C4"/>
                    <text x="24" y="15" fill="#777">${i18n.label_out_bound_config_drift}</text>
                </svg>`
            );
        }

【讨论】：