SVG初级教程

最新推荐文章于 2022-11-18 15:01:23 发布
最新推荐文章于 2022-11-18 15:01:23 发布
阅读量689 收藏
点赞数
分类专栏： SVG画图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013494746/article/details/18658027
版权

先看一个实例爽一下再去学枯燥的教程吧！

首先，得有一个xx.svg文件：

<?xml version="1.0" standalone="no"?>
/*XML声明，请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
*/
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
/*引用了外部的 SVG DTD。*/
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
/*svg开启标签，定义了宽，高，版本，命名空间的属性*/
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
/*
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
*/
</svg>

将以上代码另存为sun.svg

其次，将svg代码引用到html文件中，那么你就需要创建一个html文件：

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<embed src="sun.svg" width="300" height="100" type="image/svg+xml"pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>
以上的代码就可以画出一个比较丑的黑色边框，红色填充的圆。
以下是画出其他图形的代码，将代码插入svg标签内即可：
矩形：
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>


椭圆：
<ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
线：
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>


多边形：
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>


路径：
<path d="M250 150 L150 350 L350 350 Z" />

















 








 



                

        

        

    

  


    

      

        

            

              
                
                  sun-shadow
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
SVG语法教程指南中文版

				
			

			

				

					05-06
				

			

		

		

			
				
很好的一个矢量图开发语言，以xml格式编写，同时还可适用于web应用开发

			
		

	



                

              
                



	

		

			

				
					
SVGDeveloper制作矢量地图教程详解

				
			

			

				

					有问题可关注公众号：前端研究院     后台输入问题回复
				

				

					11-05
					
					3423
					
				

			

		

		

			
				
下面准备好环境之后就开始作图了。

一，首先我们需要找一张地图作为模板，找的模板地图尽量轮廓清晰。



下面我们就拿吉林地图来作为模板。



二 为了适应 浏览器预览时的大小，我们需要把图片修改下尺寸



一般把高度跳至530px，宽度不用做什么调整。还有一点就是，尽量吧轮廓修清晰点。



图片上的文字没啥影响，为了做个清晰的模板，我把文字都去掉。





三

1接下来就...

			
		

	



                


  
              

                


	

		

			

				
					
SVG入门教程

					
最新发布

				
			

			

				

					SoSalty的博客
				

				

					11-18
					
					4338
					
				

			

		

		

			
				
SVG入门教程 基础知识

			
		

	





	

		

			

				
					
用SVGDeveloper制作svg地图

				
			

			

				

					weixin_30718391的博客
				

				

					08-24
					
					658
					
				

			

		

		

			
				
项目中需要实现巴蜀地区图,并且将其分为川东、川西、川南、川北四个区域，鼠标悬浮对应区域的区块改变颜色。经过网上查询资料，并未找到现成的区域图，于是就利用SVGDeveloper工具绘制。
一、绘制地图
   1、首先找一张地图作为绘制模板;   2、新建svg文件：File --> New --> svg  点击ok;   3、修改svg画布大小,和使用的地...

			
		

	



		

			
		



	

		

			

				
					
使用svgdeveloper 和 svg-edit 绘制svg地图

				
			

			

				

					
				

				

					03-13
					
					502
					
				

			

		

		

			
				
目录:

1. 描述
2. 准备工作
3. 去除地图模板上的水印(可跳过)
4. 方法一、SVGDeveloper
5. 方法二、SVG-Edit





1. 描述编辑


有的时候我们需要自定义地图，本文提供基本的基于SVG的矢量图制作教程；




2. 准备工作编辑


地图模板：例如需要自定义某个省份，挑选一张省...

			
		

	





	

		

			

				
					
SVG 入门教程(三) 绘制

				
			

			

				

					03-06
				

			

		

		

			
				
这篇“SVG入门教程(三) 绘制”显然是系列教程的一部分，旨在帮助初学者掌握如何使用SVG进行图形绘制。在本教程中，我们将深入探讨SVG的基本绘图元素和方法。  SVG的优势在于其矢量特性，这意味着无论放大多少倍，...

			
		

	





	

		

			

				
					
SVG 入门教程(一) 基本形状

				
			

			

				

					03-06
				

			

		

		

			
				
这篇"SVG入门教程(一) 基本形状"将引导我们走进SVG的世界，了解如何创建和操作SVG的基本图形。  首先，SVG图像由一系列几何形状构建，包括直线、曲线、圆形、椭圆、矩形、多边形和路径等。在SVG中，这些基本形状通过...

			
		

	





	

		

			

				
					
原创开源SVG/VML在线画图插件使用教程

				
			

			

				

					Open JQuery
				

				

					07-14
					
					482
					
				

			

		

		

			
				
    前天发布了原创的SVG/VML在线画图插件，本想这么好的资源应该会有很多人关注，可惜人反而不多。不过还是在这里写下该插件的使用教程吧。

    [*][b]引入在线画图插件的JS文件[/b]
    [code="html"][/code]
    [*][b]初始化插件[/b]
    在JavaScript中将要执行画图的元素如div进行插件初始化。
    [code=...

			
		

	





	

		

			

				
					
 SVG蒙版(mask)的基础使用教程

				
			

			

				

					weixin_33709219的博客
				

				

					03-31
					
					540
					
				

			

		

		

			
				
蒙版工作原理
设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原理。上图中我创建了两个图层——蓝色的背景和红色的前景，并且在红色前景上应用了一个蒙版（右边红圈）。正常情况下红色前景应该完全遮盖住蓝色背景，但是请注意红圈中的蒙版，我在这...

			
		

	





	

		

			

				
					
svg基础教程收集

				
			

			

				

					jdk137的专栏
				

				

					08-29
					
					187
					
				

			

		

		

			
				
太棒了，特别是滤镜的部分。https://www.oxxostudio.tw/articles/201410/svg-tutorial.html

 

svgedit 

https://svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html

https://github.com/SVG-Edit/svgedit...

			
		

	





	

		

			

				
					
SVG进阶教程全攻略

				
			

			

				

					sinat_32434539的博客
				

				

					09-06
					
					916
					
				

			

		

		

			
				
SVG进阶教程全攻略前面分享过一篇基础svg的，这篇分享一些高级的SVG教程，比如SVG路径中的三次贝塞尔曲线、椭圆弧线、SVG文本和填充效果等。一.SVG路径（一）直线命令 path元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移

			
		

	





	

		

			

				
					
SVG编程经典教程(转)

					
热门推荐

				
			

			

				

					GeneralXCK的专栏
				

				

					07-01
					
					1万+
					
				

			

		

		

			
				
			                                      我应该学习这个教程吗？                                    第 1 页（共3 页）                        本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创

			
		

	





	

		

			

				
					
SVG画菱形

				
			

			

				

					sun-shadow的专栏
				

				

					01-23
					
					6723
					
				

			

		

		

			
				
SVG有已定义的矩形，圆形，椭圆形，但是怎么没有菱形咧？
让姐来教你画高端大气上档次的菱形吧！
可以用多边形来改造，代码如下：
 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="

			
		

	





	

		

			

				
					
SVG画多种不同的图形

				
			

			

				

					sun-shadow的专栏
				

				

					01-24
					
					3314
					
				

			

		

		

			
				
SVG的的元素g的作用是：用于把相关元素进行组合的容器元素。意思就是说可以在标签内画多种图形，一下代码是是在g标签内画一个圆和一个矩形。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


circle cx="100"  cy="1

			
		

	





	

		

			

				
					
如何使用SVG制作箭头

				
			

			

				

					sun-shadow的专栏
				

				

					03-11
					
					3018
					
				

			

		

		

			
				
使用SVG的path标签制作箭头：
制作效果图如下：


下面来看详细的代码：
drection.html
<embed src="drection.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
drection

			
		

	





	

		

			

				
					
SVG动态创建图形

				
			

			

				

					sun-shadow的专栏
				

				

					01-23
					
					2666
					
				

			

		

		

			
				
如果用户希望自己在SVG画布上作图，那么我们就无法预知图形相对于坐标原点的位置，这个时候就需要用到鼠标右键创建相应事件，获得鼠标右键落下时的（X，Y）坐标点。然后以该点为新的坐标原点，制作SVG图形：例如在离浏览器坐标原点（100,100）处画一个圆形：
 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.or

			
		

	





	

		

			

				
					
SVG入门教程：掌握可伸缩矢量图形

				
			

			

				

					
				

			

		

		

			
				
"这是一份名为《我的svg教程文档》的学习资料，旨在帮助开发人员掌握可伸缩向量图形（SVG）的基本概念和技术。虽然XML背景不是强制性的，但对至少一种标记语言（如HTML）的理解是推荐的，因为教程会涉及一些相关的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值