Question

如以下演示所示：

.completion {
  stroke-dasharray: 1000;

  animation: dash 3s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

  
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="76px" height="68px" viewBox="0 0 76 68" enable-background="new 0 0 76 68" xml:space="preserve">
<g>
	<text transform="matrix(1 0 0 1 22.9209 43.4141)" fill="#2EA2DC" font-family="'SFUIText-Bold'" font-size="18">45%</text>
</g>
<path fill="none" stroke="#222729" stroke-width="2" stroke-miterlimit="10" d="M16.652,65.29
	C8.984,58.838,4.112,49.171,4.112,38.366c0-19.424,15.746-35.171,35.17-35.171c19.424,0,35.17,15.747,35.17,35.171
	c0,10.805-4.872,20.473-12.54,26.924"/>
<path class="completion" fill="none" stroke="#2EA2DC" stroke-width="5" stroke-miterlimit="10" d="M17.107,65.29
	C9.44,58.838,4.567,49.171,4.567,38.366C4.567,20.6,17.74,5.911,34.852,3.532"/>
<text transform="matrix(1 0 0 1 21.3916 51.7891)" fill="#222729" font-family="'SFUIText-Light'" font-size="8">completion</text>
</svg>

Answer 1

它可能是偶然生成的，或者之前有更多元素。 SVG中的'G'元素用于将项目分组在一起。在这种情况下，您可以删除项目而不会弄碎东西。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

如果内部仅使用一个元素，为什么还要在SVG中使用<g>标签？

1 个答案: