SVG基础|SVG坐标系统和图形转换

坐标系统
一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置,X轴方向上向右是正值,向左是负值。Y轴方向上向上是正值,向下是负值。如下图所示:

而SVG的坐标系统坐标原点位于左上角,X轴和笛卡尔坐标系的X轴相同,但是Y轴则刚好相反,如果SVG中点或图形数值增加时往下增长,而不是往上。如下图所示:

SVG坐标系统的单位
你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定单位,将会使用像素(px)为单位。下面是SVG元素可以使用的单位:
- em:默认的字体大小,通常一个字符的高度
- ex:字符x的高度
- px:像素
- pt:点数,1/72英寸
- pc:Picas,1/6英寸
- cm:厘米
- mm:毫秒
-
in:英寸
SVG元素转换-TRANSFORM属性
SVG元素可以被缩放,移动,倾斜和旋转,就像HTML元素可以使用CSS来转换一样。但是因为坐标系统不同,SVG和HTML元素的转换时有差别的。
TRANSFORM属性
transform用于在一个元素上指定一个或多个转换效果。它使用一系列预定义的值作为参数,并按先后顺序逐一应用到元素上。
SVG可用的转换有:旋转,位移,倾斜和旋转。SVG的transform属性和CSS的transform相似,但是它们的参数不同。
矩阵
你可以在一个SVG元素上通过matrix()函数来应用一个或多个转换。矩阵转换的语法是:
- matrix(
)
位移
要移动一个SVG元素,你可以使用translate()函数。位移的语法是:
- translate(
[ ])
translate()函数可以带一个或两个参数,分别用于表示水平或垂直的位移。
ty参数是可选的,如果没有指定,它默认是0。tx和ty参数可以使用空格隔开,也可以使用逗号隔开,还有它们不需要使用单位。它们的单位使用的是用户坐标系统的单位。
下面的例子将一个SVG元素向右移动100个用户单位,向下移动300个用户单位。
缩放
你可以使用scale()函数来缩放SVG元素。缩放的语法是:
- scale(
[ ])
scale()函数可以带一个或两个参数,分别表示水平或垂直方向上的缩放。
sy参数是可选值,如果没有指定,它等于sx的值。sx和sy参数可以使用空格或逗号隔开。并且它们是无单位的数字。
下面的例子将一个SVG元素放大到原来尺寸的2倍。
下面的例子将SVG元素水平方向放大2倍,垂直方向缩小一半。
同样,我们可以使用逗号来分隔scale()函数的参数,上面的代码可以写为:scale(2, .5)。
这里要注意:当一个SVG元素被缩放的时候,整个当前坐标系统也会被同时缩放,导致元素会在viewport中被重新定位。
倾斜
一个SVG元素也可以被倾斜。要倾斜一个SVG元素,你需要使用skewX或skewY函数。语法如下:
- skewX(
)
- skewY(
) - skewY(
skewX函数指定元素绕X旋转,skewY函数指定元素绕Y轴旋转。
旋转角度使用的是一个无单位的角度值,默认单位是度(degrees)。
注意,元素倾斜也可能会是元素在viewport中重新定位。
旋转
你可以使用rotate()函数来旋转一个SVG元素。语法如下:
- rotate(
[ ])
rotate()函数通过rotate-angle来指定旋转角度。于CSS转换中的 rotation 不同,你不能为旋转角度指定单位,只能使用度(degrees)为单位。角度值使用的是无单位的数字,默认单位为:度。
cx和cy为可选参数,用于代表旋转的中心点。如果没有提供cx和cy值,那么旋转的中心点位于当前用户坐标系统的原点。
在rotate()函数中指定中心点就像在CSS中设置transform: rotate()和transform-origin的简写方式。由于SVG默认的旋转中心点位于当前用户坐标系统的左上角(坐标原点),你创建的旋转效果可能不是你需要的,这时你就需要指定一个新的旋转中心点。如果你知道元素的尺寸和位置,你就可以非常容易的为它指定一个旋转中心点。
下面的例子在当前用户坐标系统中将一组SVG元素绕(50,50)中心点旋转45度。
-
- ......
- ......
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201506202075.html

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

Comparing the two versions of win1121h2 and 22h2, the latter 22h2 is more stable, and 22h2 has more functions. Compared with the previous 21h2, many functions have been improved. Let’s take a look. Which one is more stable, win1121h2 or 22h2: Answer: 22h2 is more stable. Comparing win1121h2 and 22h2, 22h2 is more stable. 22h2 adds a lot of features, and the problems of 21h2 have also been improved in 22h2. 22h2 update feature: Applications folder in start menu. Adjustable fixed area in the Start menu. Drag and drop on the taskbar. Focus Assist is integrated with the Notification Center. New "Spotlight" wallpaper feature. new

Windows 101909 is currently considered one of the most stable and reliable versions. However, unfortunately, service support for this version has ended recently. 21H2 is a relatively stable version. In fact, from the actual situation, both are very good choices. Which one is better, win101909 or 21h2? Answer: 1909 is more stable, and 21h2 will be more secure. In the current environment, 1909 is still generally regarded as one of the most stable and reliable versions. However, the Win101909 version has officially stopped serving on May 11, 2021. WindowsServer21h2 is committed to providing more professional IT function support to the majority of users. 1. After actual testing by many users,

The 23h2 version and the 22h2 version in the Windows 11 system will be released in 2023 and 2022 respectively. Generally speaking, system updates are getting better and better. The editor also believes that the 23h2 version is better than the 22h2 version. Which one is better, win1123h2 or 22h2? Answer: win1123h2 is better. According to reports, win1123h2 is a cumulative version update from 22h2 to the next version, and they are all the same platform. This means that there are no compatibility issues between the two versions. It is recommended that you update them in time. The win1123h2 version brings us many practical features, such as the never-merge mode for taskbar window applications. There are more

Everyone wants to update the 23H2 version of Win11 recently, but a small number of users have not received the update push message yet. It may be that a process in the background update progress is stuck, and it will be fine after a while. What to do if the Win11 update fails to get 23H2. Method 1: Wait patiently. If the user checks the update status of the computer and finds that it is stuck, we can wait for a while and the system will continue to update. Method 2: Clear the updated cache. If the user has updated the system before and has not cleared the more detailed cache, it will affect the normal update of 23h2. You can manually clear it. Method three: Use image installation. It is recommended that you go to Microsoft's official website to download the image file of win1123h2, and then update the file.

The taskbar is the cause of many problems in the Win11 system this time. Therefore, Microsoft is about to optimize and fix it this time. The following is a detailed Win11 taskbar fault that will be fixed in 22H2. The taskbar drag and drop function may return to the details. Come and learn together. Just give it a try. Win11 taskbar failure will be fixed in 22H2 and the taskbar drag and drop function may return: 1. There are many problems and bugs in the taskbar of win11 system that affect the use of many users. Fortunately, this time Microsoft will carry out relevant maintenance for the new system. Optimize and fix, and make the taskbar more reliable. 2. Before this, when the mouse stayed on the taskbar, pop-up windows would randomly appear in other locations. 3. Also, when the mouse stays on the icon in the corner of the taskbar, the speed is too fast.

Now the win101909 version has stopped updating, so many users want to update their system version but don't know how to do it. Users only need to enter the computer settings to find the corresponding upgrade. How to update win101909 to 20h21. Click the Computer Start button, then click "Settings" 2. Then click "Update and Security" 3. Find Check for Updates here 4. Then find the corresponding version and click Download and Install, then wait for the computer to update itself That's it.

Not long ago, Microsoft's internal testers released the 20h2 version of win10. Many friends don't know what content it has updated. It doesn't matter. I will give you a detailed introduction below, let's take a look. What’s updated in win1020h2: 1. Fixed an issue that prevented you from using PowerShell to change the system locale on ServerCore. 2. Fixed the distortion issue in the tutor game application when resizing or switching to full-screen window in window mode. 3. Fixed the issue that caused lsass.exe to fail to force restart the device. 4. Fixed the document problem of being unable to print graphics or files after installing the windows update patch released on June 8. 5
