Question

我正在使用Angular（而不是AngularJS），我正在尝试在我的项目中插入圆形图。

HTML代码是：

<svg viewbox="0 0 36 36" class="circular-chart">
  <path class="circle"
    stroke-dasharray="60, 100"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  </svg>

CSS代码是：

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle {
  stroke: #4CC790;
  fill: none;
  stroke-width: 2.8pt;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}

如果您尝试在HTML页面中看到此图表，则表示您没有任何问题。您可以根据需要调整大小。但是如果你试图在你的Angular项目图中插入这个代码，那么显示非常小，我无法调整它的大小！

我已经尝试了一切！我对CSS做了各种改变而没有。我不知道如何调整它... :(

Answer 1

只需改变您的班级例如： CSS

.circular-chart {
  display: block;
 -webkit-transform: scale(3);
  transform: scale(3);
}

在Angular上调整SVG大小

1 个答案: