Question

我有SVG代码可以显示忙碌指示器。如何减小路径半径，使小柱看起来很小？

 <svg >
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>

Answer 1

您需要在HTML中设置SVG的视图框。然后，您可以在CSS中更改SVG的大小。有关更多详细信息和下面作为示例的摘要，请参见本指南https://css-tricks.com/scale-svg/。

#svgid1{
  height: 40px;
  border: 1px solid;
  background-color: lightblue;
}
#svgid2{
  height: 75px;
  border: 1px solid;
  background-color:lightskyblue;
}
#svgid3{
  height: 100px;
  border: 1px solid;
  background-color: lightseagreen;
}

<svg id="svgid1" viewBox="0 0 50 50">
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>

<svg id="svgid2" viewBox="0 0 50 50">
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>

<svg id="svgid3" viewBox="0 0 50 50">
  <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>

路径中的SVG圆半径

1 个答案: