时间戳

首页 > 解决方案 > Why isn't the svg arrow in the background css showing?

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

问题描述

I am unable to get to show the svg in the background of the selector when I use this css.

But the svg is rendered when I put it in an image tag . Even other svg are rendered when added to the background of the selector. I want this one and it is not showing.

      <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;
  }

标签： csssvgbackground-image

解决方案

Your SVG URL contain double quotes and you are adding it within double quote. You have to place it within single quote.

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>');

推荐阅读