路徑中的SVG圓半徑

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>