如何将svg矩形和文本向左对齐

raogr8fs 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(385)

我在项目中有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>`

但这是中心对齐的-

任何人面对这一点，请引导我。。

JavaScript Html css svg

来源：https://stackoverflow.com/questions/68343214/how-to-align-svg-rect-and-text-to-the-left

1条答案

按热度按时间

vlurs2pr1#

我已经更新了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>`
            );
        }

赞(0）回复(0）举报 2021-09-13

我来回答

如何将svg矩形和文本向左对齐

1条答案

相关问题

热门标签

最新问答