SVG坐标系统

最新推荐文章于 2022-06-06 16:34:31 发布
最新推荐文章于 2022-06-06 16:34:31 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： SVG 坐标系统 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc256/article/details/93538170
版权

文章目录

世界坐标系统

image

即左上角为坐标原点，从坐标原点出发从左到右为x轴正方向，从上到下为y轴正方向。

最初坐标系统

image

即以SVG画布的左上角为坐标原点。

用户坐标系统

image

对于蓝色方块而言，它的坐标表示可以用最初坐标系统来表示，同时也可以以蓝色方块的左上角作为原点，那么蓝色方块的右下角坐标就为(400, 200)。

转换坐标系统

SVG transfrom

SVG元素可以通过缩放，移动，倾斜和旋转来进行变换，这一点与HTML元素使用CSS的transform来变换相似。

注意，SVG中的transform是一个属性，是直接写在标签上的。语法如下：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Meskjei
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
SVG学习笔记（一）

				
			

			

				

					AFeng521web
				

				

					11-30
					
					656
					
				

			

		

		

			
				
SVG简介、常用图形绘制元素。

			
		

	



                

              
                



	

		

			

				
					
SVG 坐标系统

				
			

			

				

					ivenqin的博客
				

				

					12-21
					
					884
					
				

			

		

		

			
				
在开始学习如何绘图之前，我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。
数学中的坐标是由 x 轴（水平横向延伸）和 y 轴（垂直纵向延伸）交织组成，交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值，反之为负值，沿 y 轴向上为正值，反之为负值。
而 SVG 网格坐标系统的特点如下所示：

以左上角为坐标系的原点，即 (0,0)。
横向延伸为 X 轴正方向， x 坐标逐渐增大。纵向为 Y 轴正方向

			
		

	



                


  
              

                


	

		

			

				
					
svg-path-tools:操纵SVG路径的工具（D）

				
			

			

				

					05-14
				

			

		

		

			
				
操纵path工具，例如parse和scale 。 [wip]
安装
yarn add svg-path-tools
用法
import { parse , scale , stringify } from 'svg-path-tools'
const d = 'M15 10A5 5 0 0 1 10 15A5 5 0 0 1 5 10A5 5 0 0 1 15 10z'
const parsed = parse ( d )
const scaled = scale ( parsed , { scale : 0.5 } )
const stringified = stringify ( scaled )
// 'M7.5 5A2.5 2.5 0 0 1 5 7.5A2.5 2.5 0 0 1 2.5 5A2.5 2.5 0 0 1 7.5 5z'
有关的
将SVG元素转换为path

			
		

	





	

		

			

				
					
frontendmasters-svganimation:前端大师-SVG高级动画课程

				
			

			

				

					05-01
				

			

		

		

			
				
#Frontend Masters：高级SVG动画作者：Sarah Drasner
 本讲座系列的所有相关幻灯片都在这里：
幻灯片讲座中使用的所有笔都在此。
 此回购中包括一些非常基本的GSAP入门工具包。
 ##第一部分，第三部分如果您需要入门资源，则可以使用sprite和CSS动画SVG的资源。
 ##第二部分，第五节，和。
 您可以将三个目录用作GSAP入门套件：
 基本补间
基本时间表
主时间轴
##第二部分，第六部分该文件中有几种使用GSAP时间轴的方法：gsap-resources.js。 对于与jQuery的任何交互，请记住使用3.0+版本。

			
		

	



		

			
		



	

		

			

				
					
e.offsetX/e.clientX/e.pageX的区别

				
			

			

				

					weixin_30267691的博客
				

				

					06-30
					
					456
					
				

			

		

		

			
				
e.offsetX/e.clientX/e.pageX/e.screenX的区别
没有标注的是各浏览器都支持的：

e.offsetX：鼠标相对于事件源的X方向的距离( firfox 不支持)
e.offsetY：鼠标相对于事件源的Y方向的距离( firfox 不支持)

e.clientX：距离浏览器可视区域X方向的距离
e.clientY：距离浏览器可视区域Y方向的距离

e.pageX：鼠标...

			
		

	





	

		

			

				
					
SVG 坐标和 viewBox

				
			

			

				

					子燕若水的博客
				

				

					12-12
					
					1017
					
				

			

		

		

			
				
SVG用viewBox设置任意大小的绘图区域。

SVG 图形的视口由 viewBox 属性以及 svg 标签中的宽度和高度属性指定。

如果不指定 width和height，SVG 元素会占用可用的空间（就像 HTML 元素一样）。

如果没有给出测量单位，则显示系统的单位适用 - 像素适用于显示器上的浏览器。


<svg 宽度 = "1000" 高度 = "500">
 ...
</svg>


SVG宽度和高度也可以 - 类似于 CSS - 以 em、ex、pt、c...

			
		

	





	

		

			

				
					
Svg图像显示的坐标规则

				
			

			

				

					旅途
				

				

					11-11
					
					5560
					
				

			

		

		

			
				
作者：cyqian来源：cynest.cn介绍：Cyqian BLOG上的一篇日志，作者在该日志上讲解了他对SVG坐标系统的理解,如果你也有这方面经验，建议跟贴说明哦．　　想用SVG做GIS服务，至今却还是遥遥无期，路漫漫不知有多远。数据转换都没有彻底搞定，数据本身和它的显示存在微妙却不可忽略的差异。下面就讲讲SVG图像显示的略显杂乱的坐标规则。svg的坐标系统　　所有的渲染都是在某个矩形（视口，

			
		

	





	

		

			

				
					
干货｜SVG的视窗和坐标系

				
			

			

				

					中兴开发者社区
				

				

					10-13
					
					3652
					
				

			

		

		

			
				
定义SVG


定义一个SVG画布，可以在其中创建各种形状，诸如矩形、圆形、直线、路径、多边形等。
 width="800" height="600">     r="200" cx="200" cy="200" fill="#20B2AA">

上面的代码在宽为800、高为600的SVG画布上，绘制了一个原点在（200,200）、半径为200的圆形，如下图。

SVG的单位默认为

			
		

	





	

		

			

				
					
编写SVG布置画布和坐标系统以及视窗的方法

				
			

			

				

					09-24
				

			

		

		

			
				
2. SVG坐标系统：SVG的坐标系统与CSS类似，起点(0,0)位于父元素的左上角。x轴正方向向右，y轴正方向向下。你可以在这个坐标系统中任意位置创建元素，例如一个圆可以被放置在距离原点数十亿像素的位置。值得注意的是...

			
		

	





	

		

			

				
					
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标

				
			

			

				

					10-12
				

			

		

		

			
				
至于SVG坐标系统，它是一个二维笛卡尔坐标系，其中(0,0)通常位于SVG容器的左上角。你可以通过指定x和y坐标来定位和绘制图形。在Snap.svg.js中，可以通过元素的`transform()`方法进行坐标转换，如平移、缩放等。  在...

			
		

	





	

		

			

				
					
point-in-svg-path:确定点是否在SVG路径中-从Snap.svg抄录的代码

				
			

			

				

					05-02
				

			

		

		

			
				
SVG路径中的点
确定点是否在SVG路径中-从代码
例子
检查单个点是否在单个闭合路径内：
 const { pointInSvgPath } = require ( 'point-in-svg-path' )
pointInSvgPath ( 'M80 80A 45 45, 0, 0, 0, 125 125L 125 80 Z' , 100 , 100 ) // true
pointInSvgPath ( 'M80 230A 45 45, 0, 0, 1, 125 275L 125 230 Z' , 115 , 200 ) // false
 检查哪些点与哪些路径相交：
 const { getPointsAndIntersectingPaths } = require ( 'point-in-svg-path' )
const results = getPointsAndInterse

			
		

	





	

		

			

				
					
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

				
			

			

				

					09-28
				

			

		

		

			
				
SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，记下来介绍下坐标与变换,感兴趣的朋友可以了解下啊，或许对你有所帮助

			
		

	





	

		

			

				
					
svg-line:与svg.js和jquery连接

				
			

			

				

					05-13
				

			

		

		

			
				
2. SVG坐标系统：SVG使用笛卡尔坐标系，原点在左上角，x轴向右，y轴向下。  3. SVG属性：除了基本的几何属性外，线条还可以通过`stroke`（描边颜色）、`stroke-width`（描边宽度）、`stroke-dasharray`（虚线样式）...

			
		

	





	

		

			

				
					
SVG坐标系统及图形变换

				
			

			

				

					weixin_33928467的博客
				

				

					09-08
					
					225
					
				

			

		

		

			
				
前面的话
　　前面介绍过SVG视野后，本文将开始介绍SVG坐标系统及图形变换
 
坐标定位
　　对于所有元素，SVG使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下

　　定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个1...

			
		

	





	

		

			

				
					
如何在SVG中设置转换原点

				
			

			

				

					stefanie_sun723的博客
				

				

					06-06
					
					422
					
				

			

		

		

			
				
转换svg的默认原点

			
		

	





	

		

			

				
					
html可以用坐标画svg图吗,html5教程-SVG基础  SVG坐标系统和图形转换

				
			

			

				

					weixin_42584586的博客
				

				

					05-30
					
					234
					
				

			

		

		

			
				
在 坐标系统一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示：而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示：SVG坐标系统的单位你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定单位，将会...

			
		

	





	

		

			

				
					
前端SVG基础与深入01

				
			

			

				

					ZeroJsus的技术黑板
				

				

					10-30
					
					1367
					
				

			

		

		

			
				
SVG入门01引言图形图像入门1. 在前端中 我们通常说的像素是什么2. 为什么使用svg，栅格化图片与矢量图的区别SVG入门功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章...

			
		

	





	

		

			

				
					
java svgshape_SVG 多边形

				
			

			

				

					weixin_33771816的博客
				

				

					02-26
					
					249
					
				

			

		

		

			
				
SVG的图形填充规则通过fill-rule属性来指定。fill-rule有效值:nonzero | evenodd |inherit默认值:nonzero可继承:是比例:无媒体:可见fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个...

			
		

	





	

		

			

				
					
React—useRef

					
热门推荐

				
			

			

				

					Meskjei的博客
				

				

					10-16
					
					11万+
					
				

			

		

		

			
				
相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。
而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。
首先来看一下它传统的用法：
import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function A...

			
		

	





	

		

			

				
					
svg数据坐标如何获取

					
最新发布

				
			

			

				

					06-03
				

			

		

		

			
				
SVG（可缩放矢量图形）中的形状和路径通常是使用坐标来定义的。通常，SVG的坐标系统是以左上角为原点，向右为正X轴，向下为正Y轴。坐标可以使用像素、百分比、EM等单位来表示。

在SVG中，你可以通过以下方式来获取坐标数据：

1. 直接查看SVG文件中的代码，找到形状或路径的坐标定义，例如：

```html
<rect x="50" y="50" width="100" height="100" />
```

2. 使用SVG编辑器，例如Adobe Illustrator、Inkscape等，打开SVG文件并选择形状，编辑器会显示该形状的坐标信息。

3. 使用JavaScript代码来获取SVG元素的坐标信息，例如：

```javascript
var rect = document.getElementById("myRect");
var x = rect.getAttribute("x");
var y = rect.getAttribute("y");
```

以上是一些常见的获取SVG坐标数据的方法，希望能对你有所帮助。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值