使用SVG作为输入范围拇指上的css背景图像

Question

我正在尝试使用样式组件为React中的范围滑块拇指使用自定义背景SVG。目前，我很难将我创建的SVG显示出来。我已经在线测试了其他SVG，它是有效的。这就是我迄今为止的成就。它是在React与Typescript使用样式组件

我的成分风格：

const sliderThumbStyles = (props: any) => `
width: 40px;
height: 40px;
border: 0; 
background: url("data:image/svg+xml, SVG to go in here");
border-radius: 20px;
border: 5px solid white;
cursor: pointer;
margin-top: -18px
`;
const SliderWrapper = styled.div`
.value {
flex: 1;
font-size: 2rem;
}
.slider {
-webkit-appearance: none;
appearance: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
${(props) => sliderThumbStyles(props)}
}
&::-moz-range-thumb {
${(props) => sliderThumbStyles(props)}
}
&::-webkit-slider-runnable-track {
background: black;
height: 3px;
outline: none;
}
&::-moz-slider-track {
background: black;
height: 3px;
outline: none;
}
}
`;

这是我的SVG文件，在中/src/assets/images/slider/slider-thumb.svg

<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5.05025" y="31.2134" width="37" height="37" rx="18.5" transform="rotate(-45 5.05025 31.2134)" fill="#FF9675" stroke="white" stroke-width="7"/>
<path d="M31.3357 40.8633L31.3357 22.0019" stroke="#1D1D1D" stroke-width="2" stroke-miterlimit="10"/>
<path d="M38.67 26.334C32.3829 26.334 31.335 18.999 31.335 18.999C31.335 18.999 30.2871 26.334 24 26.334" stroke="#1D1D1D" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="bevel"/>
<path d="M38.67 35.5283C32.3829 35.5283 31.335 42.8633 31.335 42.8633C31.335 42.8633 30.2871 35.5283 24 35.5283" stroke="#1D1D1D" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="bevel"/>
</svg>

当我尝试导入SVg并将其包含在sliderThumbStyles方法内的css属性中时，它不起作用。我也尝试过直接删除SVG标记，但这不起作用。正如我所说，当我从网上随机放入一个SVG时，它就可以工作了，所以我认为我的SVG标记是错误的，或者我导入它不正确。有人能告诉我哪里出了问题吗？感谢

Answer 1

我设法将你的svg用作缩略图，但我不得不

• 将双引号转换为单引号
• 删除所有换行符
• 用%23对#进行编码
• 调整svg标签内的宽度和高度以匹配css

.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
background: #d3d3d3;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 40px;
height: 40px;
border: 0;
background: url("data:image/svg+xml,<svg width='40' height='40' viewBox='0 0 63 63' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5.05025' y='31.2134' width='37' height='37' rx='18.5' transform='rotate(-45 5.05025 31.2134)' fill='%23FF9675' stroke='white' stroke-width='7'/><path d='M31.3357 40.8633L31.3357 22.0019' stroke='%231D1D1D' stroke-width='2' stroke-miterlimit='10'/><path d='M38.67 26.334C32.3829 26.334 31.335 18.999 31.335 18.999C31.335 18.999 30.2871 26.334 24 26.334' stroke='%231D1D1D' stroke-width='2' stroke-miterlimit='10' stroke-linejoin='bevel'/><path d='M38.67 35.5283C32.3829 35.5283 31.335 42.8633 31.335 42.8633C31.335 42.8633 30.2871 35.5283 24 35.5283' stroke='%231D1D1D' stroke-width='2' stroke-miterlimit='10' stroke-linejoin='bevel'/></svg>");
cursor: pointer;
}

<input type="range" min="1" max="100" value="50" class="slider">