suchen

Heim  >  Fragen und Antworten  >  Hauptteil

SVG-Verlauf mit Stricheffekt

<p>我发现了这段代码</p> <pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34"> <circle cx="16" cy="16" r="15,9155" class="progress-bar__background" /> <circle cx="16" cy="16" r="15,9155" class="progress-bar__progress js-progress-bar"/> </svg></pre> <pre class="brush:php;toolbar:false;">$progress-bar-Stroke-Width: 1.8; $progress-bar-size: 300px; SVG { Höhe: $progress-bar-size; transformieren: drehen (-90 Grad); Breite: $progress-bar-size; } .progress-bar__background { füllen: keine; Strich: #e2eff0; Strichbreite: $progress-bar-strichbreite; } .progress-bar__progress { füllen: keine; Strich: #78bec7; Stroke-Dasharray: 100 100; Stroke-Dashoffset: 100; Strichzeilenkappe: rund; Strichbreite: $progress-bar-strichbreite; Übergang: Stroke-Dashoffset 1s Easy-In-Out; }</pre> <pre class="brush:php;toolbar:false;">var dependenceComplete = 0.6; var StrokeDashOffsetValue = 100 – (percentageComplete * 100); var progressBar = $(".js-progress-bar"); progressBar.css("Stroke-Dashoffset", StrokeDashOffsetValue);</pre> <p>确切的这三种颜色)?</ p>
P粉193307465P粉193307465458 Tage vor523

Antworte allen(1)Ich werde antworten

  • P粉908643611

    P粉9086436112023-08-30 07:47:05

    在SVG中,您可以使用<linearGradient><radialGradient>。您正在创建一个进度条,所以根据布局,径向渐变可能是创建“锥形渐变”(加引号!)的选项,但是使用起来真的很烦人。

    一个很好的替代内置渐变的方法可能是结合SVG和CSS。您可以将CSS样式应用于嵌入的SVG元素。只要您只需要一个可应用于SVG元素的锥形渐变,然后进行遮罩,以便它只显示在描边或其他地方。这是一个示例:

    svg {
      display: block;
      background-image: conic-gradient(from 180deg, green, orange, red);
    }
    <svg width="300" xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100">
      <defs>
        <mask id="m1">
          <rect width="100" height="100" fill="white" />
          <circle transform="rotate(120 50 50)" cx="50"
            cy="50" r="45" stroke="black" stroke-width="5"
            fill="none" stroke-dasharray="300 360" pathLength="360" />
        </mask>
      </defs>
      <rect width="100" height="100" fill="white" mask="url(#m1)" />
    </svg>

    Antwort
    0
  • StornierenAntwort