主页 / 问题 / 909569
Accepted
Olimpic Boy
Asked:2020-11-21 18:13:29 +0000 UTC2020-11-21 18:13:29 +0000 UTC

关于 svg（路径）的问题，无法填充进度条

  • 772

我只是不知道如何将绿色条填充到 100，你能帮忙吗？）

在此处输入图像描述

<svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="260" height="170"><desc>Created with Highcharts 4.2.3 /Highstock 4.2.3</desc>
  <defs>
    <clipPath id="highcharts-1">
      <rect x="0" y="0" width="240" height="145"></rect>
    </clipPath>
  </defs>
 
  <rect x="0" y="0" width="260" height="170" fill="transparent" class=" highcharts-background"></rect>
  
  <path fill="#EEE" d="M 14 133.25 A 116 116 0 1 1 245.99994200000484 133.13400001933337 L 199.59996520000288 133.18040001160003 A 69.6 69.6 0 1 0 60.400000000000006 133.25 Z" stroke="silver" stroke-width="1" zIndex="0" visibility="visible"></path>
  
  <g class="highcharts-grid" zIndex="1"></g>
  <g class="highcharts-axis" zIndex="2"></g>
  
  <g class="highcharts-data-labels highcharts-series-0 highcharts-tracker" zIndex="2" visibility="visible" transform="translate(10,10) scale(1 1)" style="">
    <g zIndex="1" style="" transform="translate(80,78)"></g>
  </g>
  
  <g class="highcharts-series-group" zIndex="3">
   
    <g class="highcharts-series highcharts-series-0 highcharts-tracker" zIndex="0.1" transform="translate(10,10) scale(1 1)" style="" clip-path="url(#highcharts-1)">
      <path fill="rgb(190,230,69)" d="M 4 123.24999999999999 A 116 116 0 0 1 213.77774134661007 54.97309886990841 L 176.26664480796603 82.28385932194504 A 69.6 69.6 0 0 0 50.400000000000006 123.24999999999999 Z" sweep-flag="0" stroke-linejoin="round" stroke-linecap="round"></path>
    </g>
    
    <g class="highcharts-markers highcharts-series-0" zIndex="0.1" transform="translate(10,10) scale(1 1)" clip-path="none">
    </g>
    
  </g>
  
  <g class="highcharts-legend" zIndex="7">
  <g zIndex="1">
  <g></g>
  </g>
  </g>
  
  <g class="highcharts-axis-labels highcharts-yaxis-labels" zIndex="7">
    <text x="39" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:76px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="149.25" opacity="1">0</text>
    <text x="221" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:76px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="149.25000000000003" opacity="1">100</text>
  </g>
</svg>

svg

1 个回答

  1. Best Answer

    stroke-dasharray对于这样的事情，使用将边界划分为指定间隙的属性是最方便的。

    function demo(){
  var val = this.value || 0,
      bar = $(this).prev('svg').find('.progress-bar'),
      strokeLength = bar[0].getTotalLength();
  bar.css('stroke-dasharray',strokeLength*val/100+','+strokeLength);
}
$('.controller').each(demo);
$('.controller').on('input',demo);
    *{
  box-sizing:border-box;
}
svg{
  width:240px;
  height:200px;
  border:1px solid;
}
.progress-bar{
  fill:none;
  stroke:#cda;
  stroke-width:20px;
}
.progress-fill{
  stroke-width:1;
  stroke:gray;
  fill:#eee;
}
text{
  text-anchor:middle;
}
.controller{
  vertical-align:top;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
  <path class="progress-fill" d="M19.5,100 a91,91 0 0 1 201,0 h-21 a69,69 0 0 0 -159,0 z"/>
  <path class="progress-bar" d="M30,100 a80,80 0 0 1 180,0" />
  
  <text x="30" y="120">0</text>
  <text x="210" y="120">100</text>
</svg>
<input type="number" class="controller" min="0" max="100" strp="1" value="0" />

    • 8

相关问题