Как заполнить цвет для SVG-пути к пончику в процентах, начиная с левой стороны? - PullRequest
Новая
       19

Как заполнить цвет для SVG-пути к пончику в процентах, начиная с левой стороны?

1 голос
/ 30 сентября 2019

У меня есть кольцевой путь SVG. Он должен начинаться с левой стороны, чтобы заполнить цвет, и должен заканчиваться справа, и он должен заполняться в процентах.

См. Это:

this

Я пыталсячтобы добиться этого вращающегося clipPath, как это: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 100">
<defs>
  <clipPath id="knobMask">
      <path style="fill: #ff554e;" d="
            M 17.72, 74.28
           a 40, 40,0, 1, 1, 56.56, 0
           l 4.25, 4.25
           a 46, 46, 0, 1, 0-65.06 ,0 Z" />
</clipPath>
</defs>
<g>
<g id="Layer_1" data-name="Layer 1">
  <g id="Path_34688-6" data-name="Path 34688-6">
    />
  </g>
  <path d="M17.72,74.28a40,40,0,1,1,56.56,0l4.25,4.25a46,46,0,1,0-65.06,0Z" />

  <g clip-path="url(#knobMask)" transform="rotate(-45,45,45)">
    <path style="fill: #ff554e;" d="M 17.72,74.28
            a 40,40,0,1,1,56.56,0
            l 4.25,4.25
            a 46,46,0,1,0-65.06,0Z" />
  </g>
</g>

Но не повезло. Как я могу заполнить этот путь цветом, начиная с левой стороны, в процентах?

Вот JS Fiddle

В основном я хочу это:

this

1 Ответ

0 голосов
/ 30 сентября 2019

Как я уже говорил, есть более простой способ добиться этого. Вы упрощаете путь к d="M 17.72,74.28a 40,40,0,1,1,56.56,0" и используете, например, fill = "none" и stroke = "10". Для красного пути вы используете тот же d, что и раньше, и вы используете штрих-черту, чтобы уменьшить видимую длину пути. Если вы используете это d, общая длина пути составляет 188,53, поэтому вы можете использовать 188,53 / 2 = 94,265: stroke-dasharray = 94,265 "

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 100" width="200">
<defs>
      <path id="base" fill="none" stroke-width="10" d="
            M 17.72, 74.28
           a 40, 40,0, 1, 1, 56.56, 0" />
 </defs> 
  <use xlink:href="#base" stroke="black"  />
  <use xlink:href="#base" stroke="#ff554e" stroke-dasharray="94.265"  />

  </svg>

В следующем примере я использую JavaScript для вычисления значения тире и значения пробела. Пожалуйста, используйте диапазон типов ввода для изменения значений. 

let totallength=base.getTotalLength();

itr.addEventListener("input",()=>{
let newSDA = (Number(itr.value)*totallength) / 100;
let gap = totallength - newSDA

red.setAttributeNS(null,"stroke-dasharray",`${newSDA} ${gap}`)
})
svg{border:1px solid}
<p><input id="itr" type="range"  /></p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 100" width="200">
<defs>
      <path id="base" fill="none" stroke-width="10" d="
            M 17.72, 74.28
           a 40, 40,0, 1, 1, 56.56, 0" />
 </defs> 
  <use xlink:href="#base" stroke="black"  />
  <use xlink:href="#base" id="red" stroke="#ff554e" stroke-dasharray="94.265"  />

  </svg>
...