首页 / JAVASCRIPT / javascript – SVG线条全屏尺寸

javascript – SVG线条全屏尺寸

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – SVG线条全屏尺寸，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7474字，纯文字阅读大概需要11分钟。

内容图文

我试图实现以下图像：

从每个圆圈出来的线无限旋转(通过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>

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

解决方法:

我会认为圆是主要元素,我会使用一个伪元素,我用旋转的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);
  }
}

<div class="circle">

</div>

为了使事情变得更容易,您可以依赖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);

}

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);
  }
}

<!-- 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>

内容总结

以上是互联网集市为您收集整理的javascript – SVG线条全屏尺寸全部内容，希望文章能够帮你解决javascript – SVG线条全屏尺寸所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/727820.html

来源：【匿名】

【上一篇】javascript – 如何查看是否已过了2个小时？【下一篇】javascript 怎么调用php方法

更多 ►

【javascript – SVG线条全屏尺寸】教程文章相关的互联网学习教程文章

[javascript svg fill stroke stroke-width points polyline 属性讲解] svg fill stroke stroke-width points polyline 绘制折线属性讲解【代码】

1 <!DOCTYPE html>2 <html lang=‘zh-cn‘>3 <head>4 <title>Insert you title</title>5 <meta name=‘description‘ content=‘this is my page‘>6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ />9 <script type=‘text/javascript‘ src=‘./js/jquery-1.1...

每天一个JavaScript实例-SVG中的javaScript展示

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><script type="text/javascript"> <![CDATA[window.onload = function(){var square = document.getElementById("square");square.onclick = function(){var color = this.getAttribute("fill");c...

基于svg中的path画40%表示的环型图（js类库Raphaël）【代码】

一、可供参考的文档资料。raphaeljs官网：http://raphaeljs.com/w3c关于path的介绍：http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.htmlmdn关于path的介绍（英文版）：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Pathsmdn关于path的介绍（中文版）：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths 二、简介raphaeljs目前支持的浏览器： Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera...

javascript – 如何根据内容设置SVG(由D3.js绘制)高度？【代码】

我使用D3.js绘制树,与此图表相同：http://bl.ocks.org/mbostock/7809166但是高度和宽度是固定的,我想高度可以通过内容自动调整. 我的代码：var svg = d3.select("#feature_tree").append("svg").attr("width", width + margin.right + margin.left).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 如果我没有定义高度,则无法完全显示树,除非我放大浏览器,否则可以显示缺失的树节点. 如果我...

vue项目中使用Svg的方法【图】

github demo: github地址闲聊背景本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。众所周知， vue-cli3 已经推出很长一段时间了，大家可以感受一下 vue-cli3 带来的零配置体验。But，也相应带来了一些弊端，就是如归需要修改默认的 loader 时，会比较麻烦。们接下来主要使用的就是上文中提到的 svg 的 use ，先上一张 vue-cli3 搭建的项目的目录，可以看到根目录下只保留了 public/ 以及 src/ ，...

javascript – 选择合适的技术(SVG vs Canvas)【代码】

我正在编写一个用于形状操作的应用程序,这样在创建简单形状之后,用户可以通过将形状相互剪切来创建更复杂的形状(即将两个圆组合在一起形成使用单个路径而不是组存储的图8,或者执行两个圆的交叉以创建“咬”标记),并且我正在尝试决定要使用的图形库. SVG似乎可以处理开箱即用的80％功能(形状存储,移动,旋转,缩放).问题是,如果不在我自己的模块中重新创建SVG功能,其他20％(使用剪辑创建一组新的复杂多边形)似乎无法实现(我必须存储一...

javascript – d3.js下载图为svg图像【代码】

我一直在寻找从d3.js下载生成的svg的方法,我最终得到了phantom.js,这看起来有点矫枉过正(或者至少令人生畏,因为问题的“简单性”)或者svg-crowbar.js这显然只适用于chrome(我需要firefox). 我还发现了以下代码：//Encode the SVG var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(d3.select('svg').node()); var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString); //Use the downlo...

JS如何操作svg来画图【图】

这篇文章主要介绍了关于JS如何操作svg来画图，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下背景：一共有3个文件：svg文件，html文件，js文件。有一个svg图，使用embed标签，引入到了html文件中svg文件：<svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn"><text x="200" y="20" font-size="20">SVG 华东地区手机12个月的数据柱状图</text><line x1="20" y1="380" x2="620" y2="...

svg实现页面高斯模糊的代码

这篇文章给大家分享的内容是关于利用svg实现页面高斯模糊，有着一定的参考价值，有需要的朋友可以参考一下。先在页面任意区域放上这段代码stdDeviation设置模糊量，最低0<svg style="display:none"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="1"/></filter><filter id="blur-effect-2"><feGaussianBlur stdDeviation="2"/></filter> </svg>在dom上调用模糊效果document.body.style.filter=url(#blur-effect-2) //调...

在Webpack中如何加载SVG

本篇文章主要介绍了Webpack实战加载SVG的方法，现在分享给大家，也给大家做个参考。SVG 作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了 Web 中矢量图的代名词。在网页中采用 SVG 代替位图有如下好处：SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。在图形线条比较简单的情况下，SVG 文件的大小要小于位图，在扁平化 UI 流行的今天，...

在React、Vue项目中如何使用SVG【图】

本篇文章主要介绍了在 React、Vue项目中使用SVG的方法，现在分享给大家，也给大家做个参考。在一些现代的扁平化设计网站，特别是移动端网站，经常会包含许多简单而清晰的小图标，例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等，这些小图标一般都是由美工做好，可能会放到精灵图上，前端再进行裁切展示。而实际上，这些简单的小图标完全没必要让美工来做，前端完全可以通过 svg使用代码把这些简单的图标画出来，...

javascript制作svg进度球实例分享【图】

在SVG发展到今天，已经在互联网上进行了各式各样的运用，当然也就包括进度条以及进度球的制作，制作这个类型的动画交互该如何制作呢？接下来就带大家来揭秘吧！1. 兴趣引导 > 最终效果 - SVG进度球：2. HTML（包含SVG）结构<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">.perText{font-size:58pt;font-family:Arial Rounded MT Bold;fill:#AD054A;text-anchor:middle;dominant-base...

前端开发中的SVG动画

这次给大家带来前端开发中的SVG动画，前端开发中使用SVG动画的注意事项有哪些，下面就是实战案例，一起来看一下。animatesvg中animate元素可以用于实现动画效果attributeName定义发生变化的元素属性名attributeType当attributeType="XML"时，attributeName被认为是XML的属性；当attributeType="CSS"时，attributeName被认为是css的属性；不指定attributeType时，默认为"auto"，会先将attributeName作为css的属性，如果无效，再将at...

SVG和VanillaJS框架创建一个“星形变心形”代码分享

本文我们主要和大家分享用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果代码，希望能帮助到大家。思路它们都是由五个三次贝塞尔曲线构成。下边的互动演示展示了每条曲线以及这些曲线相连接的点。点击任意曲线或连接点可以看到两个图形的曲线是如何相对应的。可以看出所有曲线都是由三次贝塞尔曲线创建的。即使其中一些曲线的两个控制点重叠了。构成星形和心形的形状都是极简且不符合实际的。但它们可以做到。初始代码从表情...

实例详解Webpack实战加载SVG的方法

本文主要介绍了Webpack实战加载SVG的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。SVG 作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了 Web 中矢量图的代名词。在网页中采用 SVG 代替位图有如下好处：SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。在图形线条比较简单的情...

首页 / JAVASCRIPT / javascript – SVG线条全屏尺寸

javascript – SVG线条全屏尺寸

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript – SVG线条全屏尺寸】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

SVG - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程