如何从中心 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

在CODEPEN 中查看此示例。我设法只使用 CSS 和 HTML 来构建它。

HTML

<div class="container">
  <div class="triangle"></div>
  <div class="percentage">
     92%
  </div>
  <div class="description">
     Goal Achievement <br /> Projection by End Date
  </div>
</div>

CSS

.container {
   position: relative;
   background: #E96C6A;
   width: 150px;
   height: 150px;
   color: white;
   z-index: 1;
}

.triangle {
   position: absolute;
   width: 0;
   height: 0;
   left: 40px;
   border-top: 70px solid #E8908F;
   border-left: 50px solid transparent;
   z-index: 2;
}

.percentage {
   position: relative;
   padding-top: 50px;
   padding-bottom: 5px;
   width: 100%;
   font-size: 3em;
   text-align: center;
   z-index: 3;
}

.description {
  position: relative;
  width: 100%;
  font-size: 0.8em;
  text-align: center;
}

当然，您可以通过将元素的字体和大小更改为他们想要的内容来改进它。但结构保持不变。

Answer 2

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

由于饼图的周长在 SVG 的边界之外，因此不可见，我们可以使用单个弧线。当您仅对 180 度以上的角度使用一个圆弧 ('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>