Question

我需要一个灵活的svg元素，但这是第一次使用它。我试图更改宽度，高度甚至设置圆的定位属性，但是它们都不起作用。如何调整这个圆圈的大小？预先感谢

  .chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  position: absolute;
  top: 38%;
  left: 39%;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;

  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent="75"] .outer {
  stroke-dashoffset: 133;
  //stroke-dashoffset: 50;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 124;
  }
}

<div class="container text-center">
    <figure class="chart" data-percent="75">
      <figcaption>45%</figcaption>
      <svg width="200" height="200">
        <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
      </svg>
    </figure>
  </div>

当我调整圆圈的大小时，我得到了这样的内容：Resized circle

Answer 1

请勿在SVG上使用设置的高度或宽度，而应使用viewbox属性

  <svg viewbox="0 0 200 200">

然后，只需在父容器上使用width，SVG就可以缩放到您想要的任何大小。

viewBox属性定义了用户空间中SVG视口的位置和尺寸。

Viewbox @ MDN

.container.text-center {
  /* for demo */
  display: inline-block;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  width: 100px;
  /* size here */
}

.chart figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent="75"] .outer {
  stroke-dashoffset: 133;
  //stroke-dashoffset: 50;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 124;
  }
}

.chart.wide {
  width: 150px;
}

<div class="container text-center">
  <figure class="chart" data-percent="75">
    <figcaption>45%</figcaption>
    <svg viewbox="0 0 200 200">
        <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
      </svg>
  </figure>
</div>

<div class="container text-center">
  <figure class="chart wide" data-percent="75">
    <figcaption>45%</figcaption>
    <svg viewbox="0 0 200 200">
        <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
      </svg>
  </figure>
</div>

Answer 2

使用transform属性，您可以根据需要缩放圆圈。例如：使用transform: scale(0.5,0.5);会将圆圈缩放为宽度和高度的一半。 W3 Schools shows how this works nicely。

但是，您无法转换文本，因此必须手动移动它。

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  position: absolute;
  top: 18%;
  left: 15%;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent="75"] .outer {
  stroke-dashoffset: 133;
  //stroke-dashoffset: 50;
  -webkit-animation: show75 2s;
  animation: show75 2s;
  transform: scale(0.5, 0.5);
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 124;
  }
}

<div class="container text-center">
  <figure class="chart" data-percent="75" transform="">
    <figcaption>45%</figcaption>
    <svg width="200" height="200">
        <circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
      </svg>
  </figure>
</div>

调整SVG元素的大小

2 个答案: