Question

我有一个滑块，我想用我创建的自定义svg切换输入处理程序。我的范围输入HTML如下：

 <div id="tab">
 <div class="container">
 <input type="range" min="1" max="3" steps="1" value="2" class="slider">
 </div>
 </div>

svg如下：

<svg width="100" height="100">
<circle cx="45" cy="45" r="16" stroke="rgb(0,176,203)" stroke-width="4" fill="white"/>
</svg>

我到目前为止所写的CSS如下：

.slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #cccccc;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
cursor: pointer;
overflow: unset;
border-radius: 10px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: #4CAF50;
cursor: pointer;
}

JSFiddle：http://jsfiddle.net/L5dem51u/

有没有办法在滑块当前使用的盒子里使用svg？我尝试将svg导出为png图像，然后将background属性设置为

background: url("mysvg.png")

但那没用。

Answer 1

使用 background-image: url() 时请记住，如果您使用 JPG 图像来更改图像的大小，您只需要指定高度和宽度，但在 SVG 的情况下，例如在 PNG 的情况下您需要添加 background-size: ? px 否则您将无法看到您的图片。

使用svg作为范围输入滑块

1 个答案: