如何调整CSS content属性内SVG尺寸且不缩放元素背景

通过content: url(文件路径)直接引入的SVG属于替换元素，伪元素上设置的宽高属性无法约束其尺寸，只会沿用SVG自身的固有大小；加上你给input标签加了全局transform: scale(3)，会把单选框原生样式、自定义圆形背景、对勾SVG全部等比缩放，根本无法单独调整SVG尺寸且不影响背景。

移除全局缩放属性，将SVG作为伪元素的背景图引入，通过background-size单独控制SVG尺寸，伪元素本身的宽高只控制圆形背景的大小，二者完全独立互不影响：

input[type='radio'] { 
    margin-left: 20px;
    margin-top: 20px;
    /* 移除原有transform: scale(3)，避免全元素缩放 */
    appearance: none; /* 清除浏览器默认单选框样式，避免自定义样式被覆盖 */
}

input[type="radio"]:checked::before {
    content: "";
    display: block;
    position: relative;
    /* 以下两个属性控制圆形背景的尺寸，和SVG大小无关 */
    width: 13px;
    height: 13px;
    border-radius: 50%;
    /* SVG作为背景图引入，居中显示 */
    background: #617D72 url(./tickmark.svg) no-repeat center;
    /* 单独控制SVG的显示尺寸，调整这个值就能改对勾大小，不会影响外层圆形背景 */
    background-size: 10px 7px;
}

补充说明 #

• 如果你不想依赖外部SVG文件，可以直接把SVG转义为data URI内联在CSS里，不需要额外请求SVG文件，效果和外部引用完全一致，内联写法如下：

background: #617D72 url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 9L13 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;

• background-size的数值可以根据你实际需要的对勾大小自由调整，不需要和SVG原始宽高比例完全一致，也可以设为contain让SVG自动适配伪元素内的可用空间，不会溢出背景范围。

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