圆形滑块背景不透明

Question

我正在为一个平台编写问卷。我们想使用jQuery插件制作一个圆形滑块。但有一个问题：目前滑块的样式如下：

我想要一个滑块，其中白色圆圈是透明的，这样您就可以看到渐变背景。但是..一旦我删除白色圆圈，就会得到以下结果：

我使用的jQuery插件叫做roundsliderui。有没有一种方法可以使用这个插件来解决这个问题（使内部圆形透明）？或者有没有一个插件，这是一个标准的可能性？我已经找了一段时间，但找不到正确的答案。我没有太多时间来编写整个程序。

- Rachel Romée

Answer 1

这里有一个你所询问的例子（摘自这里）。

var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
  fn1.apply(this);
  var o = this.options, r = o.radius, d = r * 2,
      r1 = r - (o.width / 2) - this._border(true),
      svgNS = "http://www.w3.org/2000/svg";
  this._circum = Math.PI * (r1 * 2);

  var $svg = $(document.createElementNS(svgNS, "svg"));
  $svg.attr({ "height": d, "width": d });

  this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({
    "fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1,
    "stroke-width": o.width, "stroke-dasharray": this._circum
  }).appendTo($svg);

  this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
    "height": d, "width": d, "transform-origin": "50% 50%",
    "transform": "rotate(" + (o.startAngle + 180) + "deg)"
  }).appendTo(this.innerContainer);
}

var fn2 = $.fn.roundSlider.prototype._changeSliderValue;
$.fn.roundSlider.prototype._changeSliderValue = function (val, deg) {
  fn2.apply(this, arguments);
  deg = deg - this.options.startAngle;

  if (this._rangeSlider) {
    this.$svg_box.rsRotate(this._handle1.angle + 180);
    deg = this._handle2.angle - this._handle1.angle;
  }
  var pct = (1 - (deg / 360)) * this._circum;
  this.$circle.css({ strokeDashoffset: pct });
}
/// ### ---- ### --------------------- ### ---- ### ///


$("#slider").roundSlider({
  width: 35,
  radius: 115,
  sliderType: "range",
  value: "20,70",
  startAngle: 90
})

body {
    background-color: #ccc;

    background-size: 100%;
    background-repeat: no-repeat;
}
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
  background-color: transparent;
}
.rs-control circle {
  /* mention the range color here */
  stroke: #02b4ff;
}
.rs-border, .rs-handle {
    border: 2px solid white;
}
.rs-handle{
    
}
.rs-tooltip-text{
    font-size: 22px;
    font-weight: bold;
    color: #ff0202;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />

<div id="root">
  <div id="slider"></div>
</div>

- Sagiv b.g