Question

我已经创建了一个SVG并将宽度设置为百分比，因为我希望它调整大小以适应不同的屏幕宽度，但是当我调整屏幕大小时，svg上下移动并且不会向左/向右移动留在中心。如果我使用像素而不是百分比，则不会随屏幕调整大小。

HTML

<svg height="100%" width="100%" id="main">
    <circle class="graph line line-1" cx="50%" cy="50%" r="25%" stroke-width="5%" stroke="#f1c40f" fill="none" />
    <circle class="graph line line-2" cx="50%" cy="50%" r="20%" stroke-width="5%" stroke="#e67e22" fill="none" />
    <circle class="graph line line-3" cx="50%" cy="50%" r="15%" stroke-width="5%" stroke="#00c0df" fill="none" />
</svg>

CSS

#main {
  padding: 100px 0;
  margin-top: 100px;
  height: 200px;
  background-color: pink;
}

.graph {
  transform: rotate(270deg);
}

.graph.line {
  transform-origin: center;
  stroke-dasharray: 160%;
  animation: graph 1.5s ease-in-out infinite alternate;
}
@keyframes graph {
  from {
    stroke-dashoffset: 160%;
  }
  to {
    stroke-dashoffset: 90%;
  }
}

Answer 1

这就是viewBox的用途。使用viewBox，可以建立一个与图像一起缩放的局部坐标系。在你的svg中，你只需使用你的本地坐标，图像就可以缩放到任何尺寸......

＆＃13;

#main {
  position:absolute;
  top:0px;left:0px;
  right:0px;bottom:0px;
  background:pink
}

.graph {
  transform: rotate(270deg);
}

.graph.line {
  transform-origin: center;
  stroke-dasharray: 160%;
  animation: graph 1.5s ease-in-out infinite alternate;
}
@keyframes graph {
  from {
    stroke-dashoffset: 160%;
  }
  to {
    stroke-dashoffset: 90%;
  }
}

＆＃13;

<svg viewBox="0 0 100 100" id="main">
    <circle class="graph line line-1" cx="50" cy="50" r="25" stroke-width="5" stroke="#f1c40f" fill="none" />
    <circle class="graph line line-2" cx="50" cy="50" r="20" stroke-width="5" stroke="#e67e22" fill="none" />
    <circle class="graph line line-3" cx="50" cy="50" r="15" stroke-width="5" stroke="#00c0df" fill="none" />
</svg>

＆＃13;

当屏幕尺寸改变或不缩放时，SVG移出位置

1 个答案: