时间戳

首页 > 解决方案 > 在 Angular 上调整 SVG 大小

angular - 在 Angular 上调整 SVG 大小

问题描述

我正在使用 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 进行了各种更改，但什么也没做。我不知道如何调整它... :(

标签： angularsvgresize

解决方案

只需转换您的类，例如：CSS

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

推荐阅读