Как залить фоновый цвет в SVG изображение в процентах

Question

Как залить фоновый цвет для изображения SVG в процентах

Я хочу залить цвет до изображения svg в процентах

Вот изображение луны svg Я хочу залить основу белого цвета на освещениипроцентная доля на луне

90% 80% 70% и т. д.

<?xml version="1.0" encoding="iso-8859-1"?> 
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="134"> 
<g> 
  <circle stroke-width="7" stroke="#000" fill="#fff" r="58" cy="69" cx="69"/>
  <path stroke-width="0" fill="#000" d="m69,9 a62,60 0 0 0 1,121 l0,-5 a70,68 0 0 1 0,-110 l0,-5 z"/>
 </g></svg>

Answer 1

Я бы сделал это с clip-path.

mooning()


control.addEventListener("input",()=>{
mooning()
})


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function mooning(){
output.innerHTML = control.value + "%";
let value = map(control.value, 0, 100, -25, 175)
moon.setAttributeNS(null, "cx", value)
}

svg{border:1px solid; width:75vh}
#control{width:75vh;}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> 
 <clipPath id="cp">
  <circle id="fullMoon"  r="50" cy="75" cx="75"/>
 </clipPath>
 <g clip-path="url(#cp)">
 <rect width="100%" height="100%" />  
 <circle id="moon" r="50" cy="75" cx="175" fill="white" />
 </g>
 
 <use xlink:href="#fullMoon" fill="none" stroke="black"  />
 
</svg>

<p><input id="control" type="range" min="0" max="100" value="60" /><span id="output"></span></p>

Answer 2

Я бы сделал это с маской.Так что я могу сделать эллиптическую тень.

// Set handler on input slider
var control = document.getElementById("control");
control.addEventListener("input", setMoonPhase);

// Initialise SVG from initial value of slider
setMoonPhase();

function setMoonPhase(evt) {
  // Convert from percentage to a 0..1 value
  var val = control.value / 100;
  // Get the ellipse element that represents the moon phase
  var  phaseEllipse = document.getElementById("phase-ellipse");
  // Set the X radius of the phase ellipse (where 100% = 0.5 -> 50% = 0 -> 0% = 0.5)
  phaseEllipse.rx.baseVal.value = Math.abs(val - 0.5);
  // If the phase > 50% then the ellipse needs to be white.
  // Otherwise it is black, to make a hole in the mask to let the black background show through.
  phaseEllipse.style.fill = (val > 0.5) ? "white" : "black";
}

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="134">
  <defs>
    <mask id="phase-mask" maskContentUnits="objectBoundingBox">
      <rect x="0.5" y="0" width="0.5" height="1" fill="white"/>
      <ellipse id="phase-ellipse" cx="0.5" cy="0.5" rx="0.2" ry="0.5" fill="white"/>
    </mask>
  </defs>
  <circle fill="black" r="58" cy="69" cx="69"/><!-- moon shadow -->
  <circle fill="#fff" r="54.5" cy="69" cx="69" mask="url(#phase-mask)"/><!-- sunlight on moon -->
  <circle stroke-width="7" stroke="black" fill="none" r="58" cy="69" cx="69"/><!-- moon border -->
</svg>

<p>
<input id="control" type="range" min="0" max="100" value="90" /><span id="output"></span>
</p>

Answer 3

Вы имеете в виду, как это?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px"> 
    <circle fill="#000" r="50" cy="55" cx="55"/>
    <circle fill="#fff" r="50" cy="55" cx="90"/>
    <circle fill="transparent" r="50" cy="55" stroke="#000" stroke-width="10" cx="55"/>
</svg>

Использование пользовательских свойств CSS:

:root{
  --stroke-width: 10;
  --side: 50;
  --gutter: calc(var(--stroke-width) / 2);
  --cx: calc(var(--gutter) + var(--side));
  --percent: calc(15 * 0.02 * var(--side));
  --moon-light: calc(var(--cx) + var(--percent));
}
  
circle{
     cx: var(--cx);
     cy: var(--cx);
     r: var(--side);
}

.moon-percent{
    cx: var(--moon-light);
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" width="100px" height="100px"> 
    <circle fill="#000" />
    <circle class="moon-percent" fill="#fff"/>
    <circle fill="transparent" stroke="#000" stroke-width="var(--stroke-width)"/>
</svg>