SVG线全屏尺寸

Question

我试图实现下面的图像：

从每个圆圈出来的线条无限旋转（通过css关键帧不难实现）我尝试使用100个div并且每个旋转10度但是未能达到我的需要。所以我想到svg和我做了一些事情，但它根本不起作用，线条不全屏。小提琴。

html,
body {
  overflow: hidden;
}

.fw {
  border-top: 1px red solid;
  width: 2000px;
}

.wrapper {
  overflow: hidden;
}

@-webkit-keyframes rotating
/* Safari and Chrome */

{
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.wrapper1 {
  display: inline-block;
  position: fixed;
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  -o-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}

<div class="wrapper" style="position:absolute;top:20%;left:10%;width:100%;height:100%;">
  <div class="wrapper1">

    <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1097 1097" style="enable-background:new 0 0 1097 1097;"
      xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:red;stroke-miterlimit:10;}
	
</style>
<defs>
</defs>
<g>
	<g>
		<line class="st0" x1="551.5" y1="0" x2="551.5" y2="1097"/>
	</g>
	<g>
		<line class="st0" x1="1097" y1="555.5" x2="0" y2="555.5"/>
	</g>
	<g>
		<line class="st0" x1="935.6" y1="152.6" x2="179.7" y2="947.6"/>
	</g>
	<g>
		<line class="st0" x1="947.2" y1="931" x2="152.2" y2="175.1"/>
	</g>
	<g>
		<line class="st0" x1="755.6" y1="41.3" x2="351" y2="1060.9"/>
	</g>
	<g>
		<line class="st0" x1="1057.8" y1="755.8" x2="38.1" y2="351.2"/>
	</g>
	<g>
		<line class="st0" x1="1055.4" y1="323.4" x2="59.6" y2="783.6"/>
	</g>
	<g>
		<line class="st0" x1="781" y1="1051.6" x2="320.8" y2="55.8"/>
	</g>
	<g>
		<line class="st0" x1="456.7" y1="13.2" x2="646.2" y2="1093.7"/>
	</g>
	<g>
		<line class="st0" x1="1090" y1="466.2" x2="9.5" y2="655.6"/>
	</g>
	<g>
		<line class="st0" x1="861.4" y1="97.1" x2="254.2" y2="1010.8"/>
	</g>
	<g>
		<line class="st0" x1="1007.3" y1="861.9" x2="93.6" y2="254.7"/>
	</g>
	<g>
		<line class="st0" x1="664.9" y1="18.6" x2="442.5" y2="1092.8"/>
	</g>
	<g>
		<line class="st0" x1="1085.9" y1="670.2" x2="11.7" y2="447.8"/>
	</g>
	<g>
		<line class="st0" x1="1008.9" y1="244.7" x2="107.6" y2="870"/>
	</g>
	<g>
		<line class="st0" x1="864.4" y1="1009.4" x2="239.1" y2="108"/>
	</g>
</g>
</svg>
    <div style="position:fixed;top:50%;left:50%;margin:0px auto;display:block;text-align:center;   width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;">Support</div>

  </div>

</div>

如果你能至少指出一些资源来实现我的需要，那将是很棒的。提前致谢。

Answer 1

另一答案