主页 / 问题 / 660741
Accepted
qwerty
Asked:2020-05-02 03:08:27 +0000 UTC2020-05-02 03:08:27 +0000 UTC

如何在 svg 上为网站绘制圆弧？

  • 772

你怎么画这样的弧线？

在此处输入图像描述

javascript

3 个回答

  1. Best Answer

    解决方案使用stroke-dasharray和stroke-dashoffset

    这个想法是只显示圆的一部分并用空格隐藏其余部分 stroke-dasharray ="314 314"
    。第一个数字是笔划的长度，第二个数字是空格的长度。这些数字不是偶然选择的，因为圆周的半径100px是： c = 2*P*R = 628px

    对于圆，SVG 认为X-s 轴的正方向是路径的起点。但是我们需要从Y-ov 轴绘制。因此，我们将圆圈逆时针旋转 90 度
    <g transform="rotate(-90 150 150)"> 

    <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400" height="400">
	<rect width="100%" height="100%" fill="#1F2024" />
	<g transform="rotate(-90 150 150)"> 	 
   <circle id="fon" cx="150" cy="150" r="100" stroke="#673E93" stroke-width="5"   stroke-dasharray ="314 " stroke-dashoffset="314" fill="none" />
    
   </g> 
   
   <line x1="150" y1="240" x2="150" y2="290" stroke="white" stroke-width="2" />

	</svg>

    接下来，我们计算绿色 (R=115px) 和蓝色圆 (R=130px) 的长度
    对于绿色，周长为 =722px
    对于蓝色圆 =816px 

    <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400" height="400">
	<rect width="100%" height="100%" fill="#1F2024" />
	<g transform="rotate(-90 150 150)" fill="none" stroke-width="5"> 	 
	   <circle id="fon" cx="150" cy="150" r="100" stroke="#673E93"  stroke-dasharray ="314 " stroke-dashoffset="314" />
		  <circle  cx="150" cy="150" r="115"  stroke="#05957A"    stroke-dasharray ="365 " stroke-dashoffset="360"  /> 
			 <circle  cx="150" cy="150" r="130"  stroke="#0F72AF"    stroke-dasharray ="408.2 428" stroke-dashoffset="488" />
    </g> 
   
   <line x1="150" y1="240" x2="150" y2="290" stroke="white" stroke-width="2" />
 </svg>

    接下来，您需要添加四分之三的圆圈，半径为：
    100px，115px 130px
    思路是一样的——使用属性stroke-dasharray ="157 471"，其中
    157——笔划长度等于圆周长度的四分之一，半径为——100px——
    471空间长度等于 3/4圆的长度

    对于另外两个半径较大的圆，数字会有所不同。总周长的计算公式 - C = 2*P*R 

    <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400" height="400">
	<rect width="100%" height="100%" fill="#1F2024" />
	
	  <g fill="none"  stroke-width="10" stroke="#2A2D2F">
        <circle id="gray100" cx="150" cy="150" r="100"       stroke-dasharray ="157 471 "      />
          <circle id="gray115" cx="150" cy="150" r="115"     stroke-dasharray ="180.5  541 " /> 
		     <circle id="gray130" cx="150" cy="150" r="130"   stroke-dasharray ="204.1  612 " />
	   </g> 		
	<g transform="rotate(-90 150 150)" fill="none" stroke-width="6"> 	 
	   <circle id="fon" cx="150" cy="150" r="100" stroke="#673E93"  stroke-dasharray ="314 " stroke-dashoffset="314" />
		  <circle  cx="150" cy="150" r="115"  stroke="#05957A"    stroke-dasharray ="365 " stroke-dashoffset="360"  /> 
			 <circle  cx="150" cy="150" r="130"  stroke="#0F72AF"    stroke-dasharray ="408.2 428" stroke-dashoffset="488" />
	  </g>
	
   
   <line x1="150" y1="240" x2="150" y2="290" stroke="white" stroke-width="2" /> 
    <text font-size="20" font-family="Verdana" x="155" y="140" stroke="#999B98" fill="#999B98"> Теплоэнергия % </text>
 </svg>

    动画 SVG 图像

    动画使用属性stroke-dasharray和stroke-dashoffset

    每个属性都有一个单独的动画，用于将参数从零更改为最大值 - values="0;314"

    点击svg图片开始动画-begin="svg1.click"
    彩色圆圈的动画一个接一个地依次
    进行 例如：绿色圆圈开始的条件是紫色圆圈动画结束，加上一个停顿0.25s 

     begin="purle1.end+0.25s"


    <svg id="svg1" version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400" height="400">
	<rect width="100%" height="100%" fill="#1F2024" />
	
	  <g fill="none"  stroke-width="10" stroke="#2A2D2F">
        <circle id="gray100" cx="150" cy="150" r="100"       stroke-dasharray ="157 471 "      />
          <circle id="gray115" cx="150" cy="150" r="115"     stroke-dasharray ="180.5  541 " /> 
		     <circle id="gray130" cx="150" cy="150" r="130"   stroke-dasharray ="204.1  612 " />
	   </g> 		
	<g transform="rotate(-90 150 150)" fill="none" stroke-width="6"> 	 
	   
	   <circle id="fon" cx="150" cy="150" r="100" stroke="#673E93"  stroke-dasharray ="314 " stroke-dashoffset="314" >
		  <animate id="purle" attributeName="stroke-dasharray" begin="svg1.click" values="0;314" dur="5s" 		repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	         
		   <animate id="purle1" attributeName="stroke-dashoffset" begin="svg1.click" values="0;314" dur="5s" repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	         
	  
	  </circle>
 

	<circle  cx="150" cy="150" r="115"  stroke="#05957A"    stroke-dasharray ="365 " stroke-dashoffset="360"  > 
	  		 <animate id="green" attributeName="stroke-dasharray" begin="purle1.end+0.25s" values="0;365" dur="5s" 		repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	         
		   <animate id="green1" attributeName="stroke-dashoffset" begin="purle1.end+0.25s" values="0;365" dur="5s" repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	      
		   
    </circle>

			<circle  cx="150" cy="150" r="130"  stroke="#0F72AF"    stroke-dasharray ="408.2 428" stroke-dashoffset="488" >
          	     <animate id="blue" attributeName="stroke-dasharray" begin="green1.end+0.25s" values="408;0;408" dur="5s" 		repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	         
		   <animate id="blue1" attributeName="stroke-dashoffset" begin="green1.end+0.25s" values="488;0;488" dur="8s" repeatCount="1"          fill="freeze"  calcMode="linear" restart="whenNotActive"/>	      

		   </circle>
	</g>
	  
   
   <line x1="150" y1="240" x2="150" y2="290" stroke="white" stroke-width="3" /> 
    <line x1="152" y1="16" x2="152" y2="60" stroke="white" stroke-width="3" /> 
    <text font-size="20" font-family="Verdana" x="155" y="140" stroke="#999B98" fill="#999B98"> Теплоэнергия % </text>
 </svg>

    • 17

  2. 我该怎么做：

    1. 我们在任何矢量编辑器中绘制（我有 Adob​​e Illustrator）：

    插画师

    1. 另存为 SVG：

    SVG

    1. 使用任何文本编辑器打开：

    文本

    1. 将代码复制到我们的 HTML 布局：

    <svg viewBox="0 0 200 200" width="200px" height="200px">
    <path d="M100,194.3c-52.1,0-94.3-42.2-94.3-94.3S47.9,5.7,100,5.7V0C44.8,0,0,44.8,0,100c0,55.2,44.8,100,100,100V194.3z"/>
</svg>

    • 8 

  3. (function() {

  // Значения индикаторов от 0 до 100.
  var data = [ 75.00, 64.00, 66.66 ];
  
  var diagramWidth = 320
    , diagramHeight = 320
    , cx = diagramWidth / 2
    , cy = diagramHeight / 2
    , indicatorRadiuses = [ 120, 100, 80 ]
    , maxAngle = 270
    , diagramBgColor = '#1f2024'
    , indicatorBgColor = '#222629'
    , indicatorColors = [ '#0f6eb3', '#00997b', '#6c3b9c' ]
    , indicatorBgWidth = 10
    , indicatorWidth = 6;
  
  function polarToCartesian(cx, cy, radius, deg) {
    var rad = (deg - 90) * Math.PI / 180;
    return {
      x: cx + (radius * Math.cos(rad)),
      y: cy + (radius * Math.sin(rad))
    };
  }

  function indicator(x, y, radius, angleStart, angleEnd) {
    var start = polarToCartesian(x, y, radius, -angleEnd)
      , end = polarToCartesian(x, y, radius, angleStart)
      , largeArc = angleEnd - angleStart <= 180 ? 0 : 1;
    return [
      'M', start.x, start.y, 
      'A', radius, radius, 0, largeArc, 1, end.x, end.y
    ].join(' ');       
  }

  document.addEventListener('DOMContentLoaded', function() {
    var scene = document.getElementById('scene');
    scene.setAttribute('width', diagramWidth);
    scene.setAttribute('height', diagramHeight);
    scene.style.backgroundColor = diagramBgColor;
    for (var i = 0; i < data.length; i++) {
      var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('fill-opacity', 0);
      path.setAttribute('stroke', indicatorBgColor);
      path.setAttribute('stroke-width', indicatorBgWidth);
      path.setAttribute('d', indicator(cx, cy, indicatorRadiuses[i], 0, maxAngle));
      scene.appendChild(path);
  
      path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('fill-opacity', 0);
      path.setAttribute('stroke', indicatorColors[i]);
      path.setAttribute('stroke-width', indicatorWidth);
      path.setAttribute('d', indicator(cx, cy, indicatorRadiuses[i], 0, data[i] / 100 * maxAngle));
      scene.appendChild(path);
    }
  });
})();
    <svg id="scene"></svg>

    • 8

相关问题