如何将svg文件添加到表行旁边，使它们看起来像照片中的一样整洁

所以我正在建立我的交通服务网站

在我要求用户提供“收货”和“目的地”的形式中，我希望获得一个整洁的谷歌式外观。 你可以在这里看到谷歌的“从”和“到”表单：

（仅在移动视图中显示）

现在我尝试的方法是在表中插入svg路径，如下所示：（不介意Rtl方向，我需要这样做）

.   
.st0{fill:#878787；}
.st0{fill:#878787；}
.st0{fill:#878787；}

如果将五个SVG合并到一个SVG中，您会发现这要容易得多

然后可以使用flex box将输入堆叠到列中。然后再次使用flex box将堆栈和SVG放在一行中

[ I N P U T ]  SVG
 s p a c e r   SVG
[ I N P U T ]  SVG

演示：

.form{
显示器：flex；
弯曲方向：行；
}
.表格输入{
高度：27px；
}
.形式.垫片{
高度：27px；
}
.form.svg{
左：1米；
}
svg{
宽度：27px；
身高：100%；
}
.st0{
填充：#878787；
}
.st1{
填充：#878787；
}
.st4{
填充：#878787；
}

请发布屏幕截图。不是每个人都想在他们的手机浏览器中找到你的帖子。另外，这一功能可能不是每个人都可以使用的。或者将来可能会改变，这样你的问题就没那么有用了。@PaulLeBeau done。很抱歉，我从原来的帖子中漏掉了它。看起来你现在看到的与截图非常接近。至少当我在Chrome上看到它的时候。你还想达到什么目的？@PaulLeBeau我已经包括了想要的结果，请再看一看。谢谢！很容易将所有元素合并到一个svg中。嗨，保罗，快速提问。让我们来考虑这个例子：为什么在第二个示例中，渐变方向不垂直于绿线？这两个梯度不应该提供相同的角度（45度）。我无法理解绘制渐变背后的逻辑。我在规范中发现，梯度法线最初垂直于对象边界框空间中的梯度向量，可能会在用户空间中相对于梯度向量呈现不垂直。。。“但我不明白。”泰曼尼亚夫说，如果绿线在未转换的空间中是垂直的。因为渐变使用的是

objectBoundingBox

coords，并且您将宽度（以及渐变）拉伸了3倍，所以它看起来是错误的。如果您能看到发生了什么。@PaulLeBeau您已经拉伸了宽度，但我也更改了viewbox以匹配矩形的宽度，那么为什么它被视为拉伸？：/。。我是否应该理解梯度的定义只考虑一个正方形，然后我拉伸正方形以匹配矩形区域？即使我删除CSS宽度/高度，它也是一样的（）。坐标的故事让我困惑。。。你是否有任何官方的参考资料显示其幕后运作的确切细节？规格不是很清楚，总是用正方形来说明。