jquery - 如何从中心填充矩形 html , css

Question

这就是我需要使用 css + html + jquery 做的...我可以编写 jquery 代码来获取输入百分比..我需要帮助来绘制它..

好吧，一个简单的填充是:

    <svg width="400" height="110">
  <rect width="100" height="100" style="fill:rgb(0,0,255);">
  Sorry, your browser does not support inline SVG.  
</svg>

Answer 1

制作一个简单的饼图相当容易。我们只需要使用一点三 Angular 函数来计算弧的坐标到百分比位置。

由于饼图的圆周在 SVG 的边界之外，因此不可见，我们可以使用单个圆弧来解决问题。有时，当您仅对 180 度以上的 Angular 使用一个圆弧 ('A') 路径命令时，可能会出现精度问题。

演示

function setPie(cx, cy, fraction)
{
  // Get reference to the <path> element that we use to make the "pie chart"
  var pie = document.getElementById("pie");
  // Pie radius (just a value we can be sure is large enough to fall outside SVG bounds)
  var radius = cx+cy;
  // Calculate end angle of pie chart (radians)
  var angle = fraction * 2 * Math.PI;
  // End coordinates of circular arc
  var endX = cx + Math.sin(angle) * radius;
  var endY = cy - Math.cos(angle) * radius;
  // Let renderer know we want to use the long direction if the arc > 180deg
  var largeArcFlag = (fraction > 0.5) ? 1 : 0;
  if (fraction < 1.0) {
    // Set the path command string with a path representing a circular sector of the right amount.
    pie.setAttribute("d", ["M", cx, cy,         // move
                           "L", cx, cy-radius,  // vertical line at fraction=0
                           "A", radius, radius, 0, largeArcFlag, 1, endX, endY,  // arc
                           "Z"].join(' '));
  } else {
    // Special case for 100%. The arc form above doesn't render properly when arc end = arc start
    // So we just make a rectangle instead
    pie.setAttribute("d", ["M", 0, 0,         // move
                           "L", 2*cx, 0, 2*cx, 2*cy, 0, 2*cy,  // lines to form a rect
                           "Z"].join(' '));
  }
    
}


// First two values are center-X and center-Y of the pie chart.
// Third value is the percentage (in the form of a fraction).

setPie(64, 66, 0.92);

svg .bg {
  fill: #e28f8d;
}

#pie {
  fill: #e16b67;
}

<svg width="128" height="132">
  <rect class="bg" width="100%" height="100%"/>
  <path id="pie" d="M0 0"/>
</svg>