如何在DIV容器内居中缩放后的单选按钮SVG图标

核心问题原因 #

你原来的代码不生效有三个核心原因：

• 原生单选按钮input[type="radio"]没有隐藏，占据了布局空间，挤压了SVG的显示位置
• 内联SVG写死了width="100" height="100"属性，不会自动跟随父容器.right_center_myicon的高度缩放
• 右侧容器内部没有做垂直居中适配，默认是顶部对齐内容

调整方案 #

1. 新增/修改CSS规则 #

/* 隐藏原生单选按钮 */
.myradioG {
    display: none;
}
/* 让SVG支持自适应缩放 */
svg {
    stroke:black; 
    stroke-width:5; 
    opacity:0.5; 
    /* 新增下面两行 */
    height: 100%;
    width: auto;
}
.right_center_myicon {
    background-color: #ccc;
    float: right;
    height: 70%; /* <==== (2) 调整这里仍然可以直接改整体高度，SVG会自动适配 */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* 新增下面三行，让内部元素垂直居中 */
    display: inline-flex;
    align-items: center;
    gap: 12px; /* 两个单选按钮之间的间距，可自行调整 */
}
/* 其余原有CSS规则保留即可 */

2. 调整内联SVG属性 #

把两个内联SVG的width="100" height="100"属性删掉，只保留viewBox属性即可，这样SVG就会完全由CSS控制尺寸，不会被写死的属性限制：

<svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>

关于SVG缩放的惯例说明 #

通过CSS调整SVG缩放是前端开发的常规操作，并不违反行业惯例：只要SVG的viewBox属性设置正确，就可以通过CSS任意调整宽高且不会变形，不需要每次修改SVG源文件。设计师通常只会输出标准比例的SVG文件，具体显示尺寸由前端根据布局需求调整即可。

内容的提问来源于stack exchange，提问作者Calaf