为什么不显示背景 css 中的 svg 箭头？

Question

当我使用这个 css.

时，我无法在选择器的背景中显示 svg

但是当我把它放在图像标签中时，svg 被渲染了。当添加到选择器的背景时，甚至其他 svg 也会被渲染。我想要这个，但没有显示。

      <select
        name="warehouse"
        id="warehouse"
        onChange={(e) => props.setSelected(e.target.value)}
        className="Selector"
        >
        
         <option className="Option" value={item1} />
         <option className="Option" value={item2} />
       
     </select>

.Selector {
    padding: 0.2vw 2vw 0.2vw 2vw;
  
 /* adding new arrow */

    background: url("data:image/svg+xml;utf8,<svg width="8" height="5" viewBox="0 0 8 5" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M0.94 0L4 3.09042L7.06 0L8 0.951417L4 5L0 0.951417L0.94 0Z" fill="black"/></svg>");
    background-position-x: 5px !important;
    background-position-y: 5px !important;

 /* remove pre existing arrow*/

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
  }

Answer 1

您的 SVG URL 包含双引号，您将其添加到双引号内。您必须将它放在单引号内。

background: url('data:image/svg+xml;utf8,<svg width="8" height="5" viewBox="0 0 8 5" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M0.94 0L4 3.09042L7.06 0L8 0.951417L4 5L0 0.951417L0.94 0Z" fill="black"/></svg>');

Answer 2

将引号更改为单引号以不同于 svg 双引号

background: url('data:image/svg+xml;utf8,<svg width="8" height="5" viewBox="0 0 8 5" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M0.94 0L4 3.09042L7.06 0L8 0.951417L4 5L0 0.951417L0.94 0Z" fill="black"/></svg');

为什么不显示背景 css 中的 svg 箭头？

Why isn't the svg arrow in the background css showing?

css

svg

background-image