Изменение размера SVG на Angular - PullRequest
Новая
       10

Изменение размера SVG на Angular

0 голосов
/ 07 июня 2018

Я работаю с 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 и ничего.Я не знаю, как изменить его размер ...: (

1 Ответ

0 голосов
/ 15 августа 2019

Просто преобразуйте свой класс, например: CSS 

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