那些遇到过的问题

SVG线全屏尺寸

mas*_*ixe 3 javascript css svg css3 css-animations

我正在尝试实现以下图像：

从每个圆圈出来的线可以无限旋转（通过css关键帧不难实现），我尝试使用100s的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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

如果您至少可以向我指出一些资源来实现我所需要的，那就太好了。提前致谢。

Tem*_*fif 5

我将圆形视为主要元素，并使用伪元素，使用旋转的SVG背景填充所有这些线。

body {
 margin::0;
 overflow:hidden;
}

.circle {
  height:100px;
  width:100px;
  margin:50px;
  background:red;
  border-radius:50%;
  position:relative;
}
.circle:before {
    content:"";
    position:absolute;
    top:-5000%;
    left:-5000%;
    right:-5000%;
    bottom:-5000%;
    background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(20deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(40deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(60deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(80deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(100deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(120deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(140deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(160deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>');
    background-size:100% 100%;
  animation:animate 6s infinite linear;
}

@keyframes animate {
  from {
    transform:rotate(0);
  }
  to {
    transform:rotate(360deg);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="circle">

</div>
Run Code Online (Sandbox Code Playgroud)

为了使事情变得更容易，您可以依靠JS来生成背景代码：

var all = document.querySelectorAll('.circle');

for (var i = 0; i < all.length; i++) {
  var c = all[i].getAttribute("data-color");
  var s = parseInt(all[i].getAttribute("data-step"));
  var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
  var end = 180 / s;
  for (var j = 1; j < end; j++) {
    b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
  }
  all[i].style.setProperty("--b", b);
  all[i].querySelector('span').style.setProperty("background", c);

}
Run Code Online (Sandbox Code Playgroud) 
body {
  overflow: hidden;
}

.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}
.circle span {
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  color:#fff;
}

.circle:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: -5000%;
  left: -5000%;
  right: -5000%;
  bottom: -5000%;
  background-image: var(--b);
  background-size: 100% 100%;
  animation: animate 10s infinite linear;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<!-- step will define the degree between each line -->

<div class="circle" data-color="red" data-step="10">
<span>some text</span>
</div>
<div class="circle" style="top:150px;left:150px;" data-color="green" data-step="20">
<span>text</span>
</div>

<div class="circle" style="left:250px;" data-color="orange" data-step="30">
<span>more here</span>
</div>

<div class="circle" style="right:50px;bottom:50px" data-color="cyan" data-step="10">
<span>more here</span>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 老兄，我寻求帮助，而不是为您做我的项目。这是巫术lvl photoshop：D欢呼的人，非常感谢&lt;3 (2认同)

归档时间：

查看次数：

140 次

最近记录：

7 年，6 月 前
相关归档
JavaScript中的'new'关键字是什么？ 1684
JavaFX TableView文本对齐方式 40
在outlook html电子邮件中,float不起作用 34
如何强制我的页脚粘贴到CSS中任何页面的底部？ 25
CSS:last-of-type与以下组合不兼容:not 11
如何在元素的伪元素之前添加svg作为内容？ 10
停止CSS3列打破段落 8
CSS Box-Shadow div overlay 4
如何使bootstrap 3下拉菜单适用于没有JS用户 3
如何使用Raphael.js绘制"无限"线？ 1
难疑归档
如何在JavaScript中创建字符串大写的第一个字母？ 3565
使用Git将我的最后一次X提交压缩在一起 3294
在JavaScript中验证十进制数 - IsNumeric() 2318
ssh"权限太开放"错误 1859
如何在Java中打破嵌套循环？ 1751
我如何递归grep？ 1619
如何在Git中完全替换另一个分支中的master分支？ 1549
如何检查对象是否在JavaScript中具有属性？ 1396
什么是右值,左值,x值,glvalues和prvalues？ 1291
LF将被git中的CRLF取代 - 这是什么,它是否重要？ 1146