我有一个带有SVG背景图像的输入字段。这就像一个魅力，图像显示：
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%239a5371"><path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"></path></svg>');
但这不起作用：
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px"><g transform="translate(0.5, 0.5)"> <path stroke-linejoin="round" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M24,2L24,2 c-5.5,0-10,4.5-10,10v6h20v-6C34,6.5,29.5,2,24,2z"></path> <rect stroke-linejoin="round" x="8" y="18" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" width="32" height="28"></rect> <circle stroke-linejoin="round" data-color="color-2" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" cx="24" cy="30" r="4"></circle> <line stroke-linejoin="round" data-color="color-2" fill="none" stroke="#444444" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="24" y1="34" x2="24" y2="38"></line> </g></svg>');
第二个稍微复杂一点，但不是那么多，嗯？有人可以告诉我为什么没有加载？ （萤火虫说图像无法加载）。
编辑：抱歉，我是笨蛋，这是十六进制的颜色。现在它正在使用＆＃34;％239a5371＆＃34;而不是＆＃34;＃9a5371＆＃34;。