<label for="r">
  <input type="range" id="r" style="width: 400px">r <span>50%</span>
</label>
<label for="cx">
  <input type="range" id="cx" style="width: 400px">cx <span>50%</span>
</label>
<label for="cy">
  <input type="range" id="cy" style="width: 400px">cy <span>50%</span>
</label>
<label for="fx">
  <input type="range" id="fx" style="width: 400px">fx <span>50%</span>
</label>
<label for="fy">
  <input type="range" id="fy" style="width: 400px">fy <span>50%</span>
</label>
<label for="gradientTransform">
  <input type="range" id="gradientTransform" min="0" max="360" value="180" style="width: 400px">rotate <span>180</span>
</label><br>
&nbsp;&nbsp;&nbsp;&nbsp; rotate可以设置原点位置(objectBoundingBox用百分比,userSpaceOnUse用实际数值)
<div>gradientUnits:
  <input type="radio" value="objectBoundingBox" checked name="radios"> objectBoundingBox
  <input type="radio" value="userSpaceOnUse" name="radios"> userSpaceOnUse
</div>
<div class="box">
  <svg viewBox="0 0 600 300">
    <radialGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(30,0.5,0.5)" cx="50%" cy="50%">
      <stop offset="0%" stop-color="crimson" />
      <stop offset="49%" stop-color="gold" />
      <stop offset="50%" stop-color="lemonchiffon" />
      <stop offset="51%" stop-color="gold" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>

    <rect fill="url(#grad)" width="100%" height="100%" />
  </svg>
</div>

.box {
  padding: 20px;
}

label {
  display: inline-block;
  margin: 20px;
}

label span {
  color: red;
}

let grad = document.querySelector("#grad");
let r = document.querySelector("#r");
let cx = document.querySelector("#cx");
let cy = document.querySelector("#cy");
let fx = document.querySelector("#fx");
let fy = document.querySelector("#fy");
let gradientTransform = document.querySelector("#gradientTransform");
const slect = (x) => document.querySelector(x);
let obj = { r, cx, cy, fx, fy, gradientTransform },
  keyArr = Object.keys(obj),
  valueArr = Object.values(obj);
valueArr.forEach((val, i) =>
  val.addEventListener("input", (e) => {
    let target = e.target.value;
    slect(`label[for=${keyArr[i]}] span`).textContent = target + "%";
    if (keyArr[i] === "gradientTransform") {
      grad.setAttribute(keyArr[i], `rotate(${target},0.4,0.4)`);
    } else {
      grad.setAttribute(keyArr[i], target + "%");
    }
  })
);
// 单选
let radios = document.querySelectorAll('input[name="radios"]');
radios.forEach((val) =>
  val.addEventListener("change", (e) => {
    grad.setAttribute("gradientUnits", e.target.value);
  })
);