svg入门学习回顾

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量144 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jay-sans/p/11263965.html
版权 
  0 参考链接：阮一峰SVG图像入门教程
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>svg</title>
  6         <style type="text/css">
  7             body{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             .red{
 12                 fill: red;
 13             }
 14             .fancy{
 15                 fill: none;
 16                 stroke: black;
 17                 stroke-width: 3pt;
 18             }
 19         </style>
 20     </head>
 21     <body>
 22         <!-- viewBox(起点x坐标,起点y坐标,视口宽，视口高) -->
 23         <!-- <svg width="1000" height="1000" viewBox="0 0 500 500" style="background: pink;">
 24           <circle id="mycircle" cx="50" cy="50" r="50" />
 25         </svg> -->
 26         
 27         <!-- 画圆circle-->
 28         <!-- <svg width="300" height="180">
 29           <circle cx="30"  cy="50" r="25" />
 30           <circle cx="90"  cy="50" r="25" class="red" />
 31           <circle cx="150" cy="50" r="25" class="fancy" />
 32         </svg> -->
 33         
 34         <!-- 直线line -->
 35         <!-- <svg width="300" height="180">
 36           <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
 37         </svg> -->
 38         
 39         <!-- polyline折线 -->
 40         <!-- <svg width="100" height="100">
 41             <polyline points="3,3 30,28 3,53" fill="none" stroke="black"></polyline>
 42         </svg> -->
 43         
 44         <!-- 绘制rect矩形 -->
 45         <!-- <svg width="300" height="180">
 46           <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
 47         </svg> -->
 48         
 49         <!-- 绘制椭圆ellipse cx,cy中心坐标 rx横向轴半径 ry纵向轴半径 -->
 50         <!-- <svg width="300" height="180">
 51           <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
 52         </svg> -->
 53         
 54         <!-- 绘制多边形polygon points点坐标集合 -->
 55         <!-- <svg width="300" height="180" style="background: red;">
 56           <polygon 
　　　　　　　　　　fill="green" 
　　　　　　　　　　stroke="orange" 
　　　　　　　　　　stroke-width="1" 
　　　　　　　　　　points="18,3 46,3 46,40 61,40 32,68 3,40 18,40"/>
 57         </svg> -->
 58         
 59         <!-- 制路径path  M起点 l经过点 z终点-->
 60         <!-- <svg width="300" height="180">
 61             <path d="
 62               M 18,3
 63               L 46,3
 64               L 46,40
 65               L 61,40
 66               L 32,68
 67               L 3,40
 68               L 18,40
 69               Z
 70             "></path>
 71         </svg> -->
 72         
 73         <!-- 文本text -->
 74         <!-- <svg width="300" height="180">
 75           <text x="50" y="25">Hello World</text>
 76         </svg> -->
 77         
 78         <!-- 复制形状use -->
 79         <!-- <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
 80           <circle id="myCircle" cx="5" cy="5" r="4"/>
 81 
 82           <use href="#myCircle" x="10" y="0" fill="blue" />
 83           <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
 84         </svg> -->
 85         
 86         <!-- 分组g -->
 87         <!-- <svg width="300" height="100">
 88           <g id="myCircle">
 89             <text x="25" y="20">圆形</text>
 90             <circle cx="50" cy="50" r="20"/>
 91           </g>
 92 
 93           <use href="#myCircle" x="100" y="0" fill="blue" />
 94           <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
 95         </svg> -->
 96         
 97         <!-- defs自定义形状 仅供引用 -->
 98         <!-- <svg width="300" height="100">
 99           <defs>
100             <g id="myCircle">
101               <text x="25" y="20">圆形</text>
102               <circle cx="50" cy="50" r="20"/>
103             </g>
104           </defs>
105 
106           <use href="#myCircle" x="0" y="0" />
107           <use href="#myCircle" x="100" y="0" fill="blue" />
108           <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
109         </svg> -->
110         
111         <!-- patten自定义形状 <pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示
112　　　　　　　　<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。 -->
113         <!-- <svg width="500" height="500">
114           <defs>
115             <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
116               <circle fill="#bee9e8" cx="50" cy="50" r="35" />
117             </pattern>
118           </defs>
119           <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
120         </svg> -->
121         
122         <!-- image图片 -->
123         <!-- <svg viewBox="0 0 100 100" width="100" height="100" style="background: red;">
124           <image xlink:href="https://picsum.photos/250?image=9"width="50%" height="50%"/>
125         </svg> -->
126         
127         <!-- animate动画 
128             attributeName：发生动画效果的属性名。
129             from：单次动画的初始值。
130             to：单次动画的结束值。
131             dur：单次动画的持续时间。
132             repeatCount：动画的循环模式。
133         -->
134         <!-- <svg width="500px" height="500px">
135           <rect x="0" y="0" width="100" height="100" fill="#feac5e">
136             <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
137             <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
138           </rect>
139         </svg> -->
140         
141         <!-- animateTransform transform <animateTransform>的效果为旋转（rotate），
142             这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。
143             from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，
144             角度为360，围绕(400, 400)旋转。
145         -->
146         <!-- <svg width="500px" height="500px">
147           <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
148             <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="1" />
149           </rect>
150         </svg> -->
151         
152         <!-- svg js操作 -->
153         <!-- <svg
154           id="mysvg"
155           xmlns="http://www.w3.org/2000/svg"
156           viewBox="0 0 800 600"
157           preserveAspectRatio="xMidYMid meet"
158         >
159           <circle id="mycircle" cx="400" cy="300" r="50" />
160         <svg>
161             
162         <script type="text/javascript">
163             let mycircle = document.getElementById('mycircle');
164             console.log(111111, mycircle)
165             mycircle.addEventListener('click', function(e){
166                 console.log('circle clicked - enlarging');
167                 mycircle.setAttribute('r', 20);
168             },false)
169         </script> -->
170         
171         <!-- 获取svg dom 使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
172         !!!注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。 -->
173         <!-- var svgObject = document.getElementById('object').contentDocument;
174         var svgIframe = document.getElementById('iframe').contentDocument;
175         var svgEmbed = document.getElementById('embed').getSVGDocument(); -->
176         
177         <!-- 读取svg源码 -->
178         <!-- <div id="svg-container">
179           <svg
180             xmlns="http://www.w3.org/2000/svg"
181             xmlns:xlink="http://www.w3.org/1999/xlink"
182             xml:space="preserve" width="500" height="440"
183           >
184             <rect x="0" y="0" width="100" height="100" fill="#feac5e">
185                 <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
186                 <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
187             </rect>
188           </svg>
189         </div>
190         <script type="text/javascript">
191             let svg = document.querySelector('svg')
192             
193             // 使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
194             let svgString = new XMLSerializer().serializeToString(svg);
195             
196             svg.addEventListener('click', function(e){
197                 console.log(svgString);
198             })
199         </script> -->
200         
201         <!-- svg图像转换为canvas图像 -->
202         <!-- <script type="text/javascript">
203             首先新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
204             var img = new Image();
205             var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
206             
207             var DOMURL = self.URL || self.webkitURL || self;
208             var url = DOMURL.createObjectURL(svg);
209             
210             img.src = url;
211             
212             然后当图像加载完成后，再将它绘制到<canvas>元素。
213             img.onload = function () {
214               var canvas = document.getElementById('canvas');
215               var ctx = canvas.getContext('2d');
216               ctx.drawImage(img, 0, 0);
217             };
218         </script> -->
219         
220     </body>
221 </html>

 

转载于:https://www.cnblogs.com/jay-sans/p/11263965.html

banglongchu5551
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3.js 学习 - 0 - SVG 基础回顾
mjzhang1993的博客
07-25 648
D3.js 学习 - 0 - SVG 基础回顾 说明 D3 并没有一如一种新的视觉展现形式，图形方面的描述都是来源自 web 标准：HTML、SVG、CSS 图表仅仅是内部有一些形状的矩形，而D3提供的是一种让你通过操作图标或者你自己定义的图形来表达你想要展示数据的方式，它让你可以轻易的为图形添加可视化交互，定义你的 图形有怎样的行为。 SVG 是可缩放矢量图...
SVG脚本编程介绍
weixin_33801856的博客
10-09 201
SVG脚本编程介绍（一） 人气：13720 Svg脚本编程简介（一） 本文主要介绍SVG的脚本编程，并分别给出放大、缩小，查询，鼠标事件等实例。 一、           SVG简介 SVG，全称为Scalable Vector Graphics（可伸缩矢量图形）。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性（scalable），动态的，交互性强。SV...
关于svg图纸实现点击坐标修改svg参数
weixin_47369582的博客
08-08 296
最近公司有一个需求，挺有意思的实现方式，花了点功夫实现了最近公司有一个需求，挺有意思的实现方式，花了点功夫实现了需求是: 给定一张图纸，如果点击特定的坐标矩阵内，则弹出弹窗进行修改一开始是想着用png来实现，但是图纸又有放大缩小拖拽的需求，加上后端返回的cad源文件的坐标不准(cad图纸的定位是根据cad文件的原点进行定位而不是图纸左上角定位)，翻阅svg的特点找到以下实现方式。
SVG DOM常用属性和方法介绍(1)
井底下的猪
05-22 369
12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准，因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同，有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。 12.2.1  文档初始化相关 —  evt属性 evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相...
TS 从 小白 到入门 学习笔记
weixin_64747231的博客
01-07 407
TS 学习笔记 ,从 菜鸟 到 入门实战,致力于为 大家分享 自己的学习笔记,以及遇到的相关难题.....
SVG常用图形基础学习资料
02-03
SVG:scalable vector graphics 可缩放矢量图形 SVG常用图形基础学习资料
用于vue引入SVG入门的学习材料
03-07
帮助更多人了解SVG vuer引入方式
从零学习svg，svg基础总结
07-19
公司需要做一款编辑器，其中的绘图是使用svg图片进行绘制边框，我们需要改变他的路径，让组件样式可以在编辑器设置
从零学习SVG知识
09-07
静止无功发生器，英文描述为：Static Var Generator，简称为SVG。又称高压动态无功补偿发生装置，或静止同步补偿器。是指由自换相的电力半导体桥式变流器来进行动态无功补偿的装置。SVG是目前无功功率控制领域内的...
html5+svg学习指南之SVG基础知识
12-13
　SVG 指可伸缩矢量图形 (Scalable Vector Graphics)　SVG 用来定义用于网络的基于矢量的图形　SVG 使用 XML 格式定义图形　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失　SVG 是万
SVG pattern 使用（patternUnits、patternContentUnits）
卡尔特斯
10-29 1701
<pattern> 是 SVG 的一个图案填充标签，可以在 pattern 中定义好图案，然后通过 id 引用来对某个图形进行填充 <pattern> 的 width/height 属性默认是根据所填充图形的百分比来确定的。 pattern 标签另外的两个属性为 patternUnits 和 patternContentUnits。 两个属性值一样，但 patternUnits 默认值为 objectBoundingBox， 而 patternContentUnits 默..
SVG 基础知识 回顾
weixin_33758863的博客
04-05 75
第一次开通博客，思前想去还是先回顾下去年做比赛作品时学习的SVG动画。下一篇写SVG制作动画总结。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 先了解下SVG的优势：可在任何的分辨率下被高质量地打印；图像中的文本是可选的，同时也是可搜索的（很适合制作地图）；可以与 Java 技术一起运行；与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强；所有...
前端提高篇(七十)：SVG基本使用、基本样式、路径path
2301_79055083的博客
04-09 574
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取。
javascript 动态改变svg图形
xia542046446的专栏
07-10 7132
//嵌入svg                                    src="ksh.svg" pluginspage="http://www.adobe.com/svg/viewer/install/">>          //javascript操作svg
SVG入门—如何手写SVG
weixin_33978016的博客
04-11 2944
欢迎关注富途web开发团队 ，缺人从众 小编刚来公司的时候，有个需求需要做一个图形动画，当时本来想使用图片做的。Toobug看了需求后，就说可以使用SVG做呀。小编当时对与SVG一点都不会呀。Toobug看我那无辜的表情，说没事。我这有一本书 《SVG精髓》（作者：就是Toobug），你拿去看看，边学边做呗。 好吧，小编后面就看了一个星期的SVG精髓，现在也算入门了吧。 那么今天小编也不是让大...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1086
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 145
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
svg polyline
12-23
以下是两个关于SVG polyline的例子： 1. 创建一个只包含直线的形状： ```xml <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值