2

Никак не могу разобраться, как заполнить полосу зеленого цвета до 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>

1 ответ 1

8

Для подобных вещей удобнее всего использовать свойство 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" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.