2020年新年大赛！

Question

Daniyal Lukmanov

Asked:2020-04-03 22:34:39 +0000 UTC2020-04-03 22:34:39 +0000 UTC 2020-04-03 22:34:39 +0000 UTC

SVG半圆分成3等份

772

我有一个应用程序Vue.js ，我需要创建一个进度条。我使用 Svg 是因为其他选项不起作用。如何将 SVG 半圆分成相等的部分。我得到一条实线。试图操纵属性stroke-dasharray，但它不起作用。你需要得到这样的东西：

到目前为止我已经做到了

我的代码：

<div class="radial">
        <svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 200 200" data-value="40">
            <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
            <path class="meter" stroke="#D15F45" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" pathLength="100" stroke-dasharray="38, 100"/>
        </svg>
    </div>

3 个回答

Voted

Stranger in the Q · Answer 1 · 2020-04-03T23:02:50Z

最简单的选择，如果背景是白色的，可以用来自中心的 2 条白线覆盖：

requestAnimationFrame(draw)
function draw(dt) {
  document.querySelector('.meter').setAttribute('stroke-dasharray', `${dt/10%100}, 100`);
  requestAnimationFrame(draw)
}

<div class="radial">
  <svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
    <path class="bg" stroke-width="22" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
    <path class="meter" stroke-width="22" stroke="#D15F45" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" pathLength="100" stroke-dasharray="38, 100"/>
    <path stroke="white" stroke-width="5" d="M100 100 l-100 -100"/> 
    <path stroke="white" stroke-width="5" d="M100 100 l100 -100"/> 
  </svg>
</div>

带面具的选项

在这里，边框使用了另一种形状，线条粗细更大，我们用蒙版从其中剪掉了不必要的形状：

<body style="margin:0; overflow:hidden">
    <svg  height="200" width="640">
      <defs>
      <mask id="m">
        <rect width="100%" height="100%" fill="white"/>
        <path stroke="black" stroke-width="2" d="M100 100 l100 -100"/> 
        <path stroke="black" stroke-width="2" d="M100 100 l-100 -100"/> 
        <path fill="black" d="M100 100 l-115 100 l115 100 l115 -100z"/>    
      </mask>
      </defs>

      <g>
        <circle fill="none" stroke-width="25" stroke="#999" r="77" cx="100" cy="100"/>
      </g>
      
      <g transform="translate(220,0)">
        <rect width="100%" height="100%" fill="white"/>
        <path stroke="black" stroke-width="2" d="M100 100 l100 -100"/> 
        <path stroke="black" stroke-width="2" d="M100 100 l-100 -100"/> 
        <path fill="black" d="M100 100 l-115 100 l230 0z"/>    
      </g>
      
<g transform="translate(440,0)">
        <circle mask="url(#m)"fill="none" stroke-width="25" stroke="#999" r="77" cx="100" cy="100"/>
      </g>
            <text text-anchor="middle" alignment-baseline="central" font-size=55 x=210 y=100>+</text>
            <text text-anchor="middle" alignment-baseline="central" font-size=55 x=420 y=100>=</text>
   </svg>
 </body>

结果：

let meter = document.querySelector('path.meter');
let text = document.querySelector('text');
let arrow = document.querySelector('path.arrow');
let length = meter.getTotalLength();

requestAnimationFrame(draw)

function draw(dt) {
  progress(dt / 100 % 100);
  requestAnimationFrame(draw)
}

function progress(value) {
  meter.setAttribute('stroke-dasharray', `${length/100*value}, ${length}`);
  arrow.setAttribute('transform', `rotate(${-135+value*270/100} 100,100)`);
  text.innerHTML = Math.round(value);
}

<svg height="175" viewBox="0 0 200 200">

  <defs>

    <mask id="mask1">
      <rect width="100%" height="100%" fill="white"/>
      <path stroke="black" stroke-width="2" d="M100 100 l100 -100"/> 
      <path stroke="black" stroke-width="2" d="M100 100 l-100 -100"/> 
      <path fill="black" d="M100 100 l-115 100 l230 0z"/>    
    </mask>

    <mask id="mask2">
      <rect width="100%" height="100%" fill="white"/>
      <path stroke="black" stroke-width="5" d="M100 100 l100 -100"/> 
      <path stroke="black" stroke-width="5" d="M100 100 l-100 -100"/>  
    </mask>

   </defs>
  
   <g fill="none">
     <circle mask="url(#mask1)" stroke-width="25" stroke="#999" r="77" cx="100" cy="100"/>
     <path mask="url(#mask2)" stroke-width="22" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0"/>
     <path mask="url(#mask2)" stroke-width="22" stroke="#d15f45" d="M41 149.5a77 77 0 1 1 117.93 0" class="meter"/>
     <circle stroke-width="7" stroke="#ccc" r="33" cx="100" cy="100"/>
   </g>
   <text x="100" y="100" font-family="arial" font-size="22px" text-anchor="middle" alignment-baseline="central">0</text>
   <path class="arrow" transform="rotate(-135 100,100)" fill="#ccc" d="M100,65 l5,0 l-5,-10 l-5,10"></path>
 </svg>

UPD：如问题中所述，带有数字和箭头

Alexandr_TT · Answer 2 · 2020-04-04T02:38:59Z

使用 stroke-dasharray 的解决方案

给定路径的最大长度等于长度350px
计算使用getTotalLength()

 <input  type="button" value="Максимальная длина"  onclick="TotalLength()"/>
 <div>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
     width="500" height="500" viewBox="0 0 500 500" > 
 
         <path id="check" fill= "none" stroke ="grey" stroke-width ="1" 
         
		 d="M41 149.5a77 77 0 1 1 117.93 0" />
</svg> 
</div>
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
  </script>

如果你需要分成三个相等的扇区，那么一个扇区的长度将等于116.67px
这是长度的总和：行 -110px和空格6.67px

<svg  xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
       <path class="bg" stroke="#ccc" stroke-width="20" stroke-dasharray="110 6.67" 
		      d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
 </svg>

有关如何使用stroke-dasharray 此处和此处将圆圈分成相等部分的更多详细信息

填充第一个扇区的动画是基于将笔划长度的值从零更改为最大值110px

<animate id="an1" attributeName="stroke-dasharray" begin="0s;an3.end" values="0 110 0 240;110 0 0 240" dur="2s" fill="freeze" />

同理，剩下的2个扇区依次填充。

我制作了不同颜色的扇区，如果需要，可以指定一种颜色。

<svg  xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
       <path class="bg" stroke="#ccc" stroke-width="20" stroke-dasharray="110 6.67" 
		      d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
          
		  <path  class="meter" stroke="green" stroke-width="20" 
			  d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" > 
			  <! анимация заполнения зелёного сектора -->
			  <animate id="an1"
          attributeName="stroke-dasharray"
          begin="0s;an3.end"
          values="0 110 0 240;110 0 0 240"
          dur="2s"
          fill="freeze" />  
		  </path>   
                   <! анимация заполнения жёлтого сектора -->		  
			  <path  class="meter" stroke="gold" stroke-width="20" 
			    d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" >
			  <animate id="an2"
           attributeName="stroke-dasharray"
           begin="an1.end" 
			     values="0 116.67  0 110  0 116.67;0 116.67  110 0  0 116.67"
           dur="2s"
           fill="freeze" />  
			</path>   
			       <! анимация заполнения красного сектора -->
			   <path  class="meter" stroke="red" stroke-width="20" 
			      d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" >
			     <animate id="an3"
              attributeName="stroke-dasharray"
              begin="an2.end"
              values="0 116.67 0 116.67 0 116.67;0 116.67  0 116.67 110 0"
              dur="2s"
              fill="freeze" />  
			</path> 
 </svg>

指针箭头动画

<animateTransform id="an_arrow" attributeName="transform" type="rotate" values="-10 100 100;255 100 100" dur="6s" repeatCount="indefinite" fill="freeze" />

<svg  xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
       <path class="bg" stroke="#ccc" stroke-width="20" stroke-dasharray="110 6.67" 
		      d="M41 149.5a77 77 0 1 1 117.93 0"  fill="none"/>
          
		  <path  class="meter" stroke="green" stroke-width="20" 
			  d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" > 
			  <! анимация заполнения зелёного сектора -->
			  <animate id="an1"
          attributeName="stroke-dasharray"
          begin="0s;an3.end"
          values="0 110 0 240;110 0 0 240"
          dur="2s"
          fill="freeze" />  
		  </path>   
                   <! анимация заполнения жёлтого сектора -->		  
			  <path  class="meter" stroke="gold" stroke-width="20" 
			    d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" >
			  <animate id="an2"
        attributeName="stroke-dasharray"
        begin="an1.end"
        values="0 116.67  0 110  0 116.67;0 116.67  110 0  0 116.67" dur="2s"
        fill="freeze" />  
			</path>   
			       <! анимация заполнения красного сектора -->
			   <path  class="meter" stroke="red" stroke-width="20" 
			      d="M41 149.5a77 77 0 1 1 117.93 0"   fill="none"   stroke-dasharray="0 350" stroke-dashoffset="0" >
			     <animate id="an3"
           attributeName="stroke-dasharray"
           begin="an2.end"
           values="0 116.67 0 116.67 0 116.67;0 116.67  0 116.67 110 0"
           dur="2s"
           fill="freeze" />  
			</path> 
			
			<circle cx="100" cy="100" r="50" fill="none" stroke-width="4" stroke="silver" />
			 <path d="m62.4 134.1c0 2.8 13.6 7.4-2.6 5-2.7-0.4-10.7-0.2-10.7-0.2 0 0 4-13.1 4.1-19.1 0.1-6 9.2 11.5 9.2 14.3z" fill="silver">
			 <animateTransform id="an_arrow"
       attributeName="transform"
       type="rotate"
       values="-10 100 100;255 100 100"
       dur="6s"
       repeatCount="indefinite"
       fill="freeze" />
			 </path>
			 <circle cx="100" cy="100" r="3" fill="#8E8E8E"  />
       
	   </svg>

填充进度条并显示百分比的相关主题的链接：

Daniyal Lukmanov · Answer 3 · 2020-04-04T16:36:44Z

以答案Stranger in the Q为基础Alexander_TT，我得到了一个符合我项目条件的结果。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radial">
        <svg  xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200" data-value="40">
            <defs>
                <mask id="mask1">
                    <rect width="100%" height="100%" fill="white"/>
                    <path stroke="black" stroke-width="2" d="M100 100 l100 -100"/> 
                    <path stroke="black" stroke-width="2" d="M100 100 l-100 -100"/> 
                    <path fill="black" d="M100 100 l-115 100 l115 100 l115 -100z"/>    
                </mask>
                <mask id="mask2">
                    <rect width="100%" height="100%" fill="white"/>
                    <path stroke="black" stroke-width="5" d="M100 100 l100 -100"/> 
                    <path stroke="black" stroke-width="5" d="M100 100 l-100 -100"/>  
                </mask>
            </defs>
            <circle mask="url(#mask1)" fill="none" stroke-width="25" stroke="#bfb09d" r="77" cx="100" cy="100"/>
            <path mask="url(#mask2)" fill="none" stroke-width="22" stroke="#FFF" d="M41 149.5a77 77 0 1 1 117.93 0"/>
            <path mask="url(#mask2)" fill="none" stroke-width="22" stroke="#D15F45" d="M41 149.5a77 77 0 1 1 117.93 0" class="meter" pathLength="30" stroke-dasharray="22, 999">
                <animate id="an1" attributeName="stroke-dasharray" from="0 0" to="22 999" dur="1s" repeatCount="0" fill="freeze" />
            </path>  
            <circle cx="100" cy="100" r="50" fill="none" stroke-width="4" stroke="#bfb09d" class="arrow-circle"/>
            <path d="m62.4 134.1c0 2.8 13.6 7.4-2.6 5-2.7-0.4-10.7-0.2-10.7-0.2 0 0 4-13.1 4.1-19.1 0.1-6 9.2 11.5 9.2 14.3z" fill="#bfb09d">
                <animateTransform id="an_arrow" attributeName="transform" type="rotate" from="-10 100 100" to="186 100 100" dur="1s" repeatCount="0" fill="freeze" />
            </path>
            <text font-size="36px" x="100" y="100" fill="#D15F45" text-anchor="middle" alignment-baseline="central">22</text>
        </svg>
    </div>

属性数据（在示例中，由硬编码指定pathLength = 30）currentVal = 22。

SVG半圆分成3等份

使用 stroke-dasharray 的解决方案

指针箭头动画

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

SVG半圆分成3等份

3 个回答

使用 stroke-dasharray 的解决方案

指针箭头动画

相关问题