Question

我在这里创建了一个SVG动画：https://plnkr.co/edit/5FlA5j8iXO4EPCzxAugs?p=preview

我如何减少蜱的大小？例如，显示的尺寸的一半？

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  -webkit-animation: draw 1.2s infinite ease;
  animation: draw 1.2s infinite ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
-webkit-@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="150" height="150">
  <path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

Answer 1

您可以像这样使用css transform: scale(0.5);到#check：

CSS转换属性允许您修改的坐标空间 CSS视觉格式化模型。使用它，元素可以翻译，旋转，缩放和倾斜。 - Mozilla MDN

＆＃13;

#check {
  transform: scale(0.5);
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  -webkit-animation: draw 1.2s infinite ease;
  animation: draw 1.2s infinite ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg width="150" height="150">
  <path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

＆＃13;

Answer 2

我建议将viewbox属性添加到svg元素中，这样您就可以通过简单地更改宽度和/或高度来正确控制元素的大小，同时保持其方面和内部坐标系。

您的元素大约有一个140 x 95视图框，因此您可以编写

<svg width="50" viewbox="0 0 140 95">
    <path id="check" d="M10,30 l30,50 l95,-70" /> 
</svg>

示例：https://plnkr.co/edit/ERuQr4NsKfYHT7kebjkR?p=preview

减小SVG刻度的大小

2 个答案: