如何将Inline SVG设为Input元素背景图并正确设置尺寸与定位？

嘿，我明白你遇到的麻烦了——用SVG当搜索框背景时，尺寸设小了就截断，设大了又定位不准，确实挺头疼的。我来给你拆解一下问题根源，再一步步解决：

问题核心 #

你遇到的情况主要是两个原因：

1. SVG的viewBox和实际图形的边界不匹配，导致缩放时要么截断图形，要么留下多余空白影响定位；
2. 没有明确设置background-size，让SVG自适应你想要的显示尺寸，而是依赖SVG自身的width/height属性，导致控制失效。

解决方案步骤 #

1. 优化SVG的viewBox（去掉多余空白）

首先，我们要让viewBox刚好包裹住你的搜索图标，这样SVG就没有多余的空白，定位时更精准。你可以：

• 去掉SVG的width和height属性，只保留viewBox（让SVG成为“矢量容器”，完全由background-size控制显示尺寸）；
• 确保viewBox的范围能覆盖所有图形元素。比如你的搜索图标，实际图形的坐标范围大概是x从10到32，y从10到28，所以把viewBox设为0 0 32 32就足够（留一点余量避免截断）。

2. 用background-size固定图标尺寸

不管SVG本身的大小，直接用background-size指定你想要的图标显示尺寸（比如20px），这样就能精准控制图标大小，不会出现截断或过大的问题。

3. 精准调整background-position

因为我们已经去掉了SVG的多余空白，现在用像素值或百分比设置background-position就能让图标准确对齐。比如设为10px center，就是让图标距离输入框左侧10px，垂直居中。

修正后的完整代码 #

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center; /* 水平左间距10px，垂直居中 */
  background-size: 20px 20px; /* 固定图标大小为20x20px */
  padding: 10px 40px;
  padding-left: 40px; /* 确保输入文字不覆盖图标 */
  border: 1px solid #ddd; /* 加个边框方便看效果 */
}

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>

额外小贴士 #

• 如果担心图形截断，可以给SVG加上preserveAspectRatio="xMinYMin meet"属性，它会确保图形在viewBox内完整显示，不会被截断；
• 可以用SVG压缩工具优化你的inline SVG，去掉冗余代码，让背景图加载更快；
• 要是想让图标在不同宽度的输入框里都保持比例，background-size也可以用百分比，比如20% auto。

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