当前位置:网站首页>Simple understanding of SVG
Simple understanding of SVG
2022-07-03 02:21:00 【Uncle ship】
svg
canvas and svg difference
canvas:
- Canvas yes H5 New label , It's the canvas . utilize JavaScript Draw an image on a web page .Canvas It's rendered pixel by pixel , Rich in color , Scaling distortion .
- Modify the graphics You need to redraw the entire canvas
svg:
- Scalable vector graphics ( Image format that will not be distorted after zooming Scalable Vector Graphics)
- svg It's through DOM Operation to display ,svg Each graph in is a separate node , Easy to change style .
svg
version:svg The version number of the specification followed 1.0 1.1 Two versions
xmlns: Definition svg Naming specification .
x y Represents the starting coordinate width and height Represents the width and height of the rectangle Before setting the fill color The default is black fill Set fill color
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="30" width="100" height="100" fill="pink" class="r"/>
</svg>
svg route
M:moveTo Move to a coordinate point
L:lineTo: Draw a line to a coordinate point
Z:close closed
stork: Line color
stork-width: The width of the line
<path d="M75,20 L100,100,L400,150,Z" fill="pink" stroke="yellow" stroke-width="10"> </path>
// Capitalization is absolute positioning Lowercase is relative positioning Relative to the previous coordinate
<path d="M75,20 l50,0,L50,10 Z" fill="" stroke="green" stroke-width=""> </path>
round
cx and cy It defines the center of a circle x y coordinate r For radius
<circle cx="100" cy="50" r="40" fill="" stroke="green" stroke-width="10">
The parameters respectively represent the starting coordinates Maximum radius and minimum radius Rotation Angle Large and small angle arc (1,0) Clockwise and counterclockwise (1,0) Coordinates of the end x y
<path d="M120,120 A60 60 0 1 1 121 121 Z" fill="" stroke="pink" stroke-width="20"> </path>
svg The gradient
id Is the only name of the gradient x1 y1 x2 y2 Set the direction of the gradient
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="yellow" stop-opacity=""/>
<stop offset="33%" stop-color="blue" stop-opacity=""/>
<stop offset="66%" stop-color="green" stop-opacity=""/>
<stop offset="100%" stop-color="pink" stop-opacity=""/>
</linearGradient>
</defs>
// fill Set fill color id Is the name of the gradient
<rect x="10" y="10" width="200" height="200" fill="url(#grad)" style=""/>
svg Animation
svg Animation cannot be used due to some scenes , Simply understand .
Follow css Animation is very similar
attriName: deformation
type: Choose the animation operation mode Here is the rotation
form: Where to start
to: Where to end
dur: Animation execution time
repeatCount: Number of animation repetitions
<g>
<text x="150" y="100" style=""> having dinner sleep </text>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="100"
dur="250ms"
repeatCount="indefinite"/>
</g>
svg written words
Define a route path id As the name of the text execution route according to id Select which alignment style the text is based on
<defs>
<path d="M0 50 l100 100 l100 -100 Z " id="p1"/>
<path d="M0 50 l100 100 l100 -100 Z " id="p2"/>
</defs>
<text x="" y="" style="">
<textPath xlink:href="#p1">
Tao Dahua Panglin What a lovely person, a group of old six
</textPath>
</text>
边栏推荐
- [Flutter] dart: class; abstract class; factory; Class, abstract class, factory constructor
- 8 free, HD, copyright free video material download websites are recommended
- GBase 8c系统表-pg_constraint
- Apple releases MacOS 11.6.4 update: mainly security fixes
- stm32F407-------IIC通讯协议
- Restcloud ETL cross database data aggregation operation
- Unrecognized SSL message, plaintext connection?
- Gbase 8C system table PG_ authid
- Face recognition 6-face_ recognition_ Py based on OpenCV, face detection and real-time tracking using Haar cascade and Dlib Library
- Codeforces Round #418 (Div. 2) D. An overnight dance in discotheque
猜你喜欢
Depth (penetration) selector:: v-deep/deep/ and > > >
stm32F407-------IIC通讯协议
[shutter] bottom navigation bar implementation (bottomnavigationbar bottom navigation bar | bottomnavigationbaritem navigation bar entry | pageview)
Awk from introduction to earth (0) overview of awk
oauth2.0鉴权,登录访问 “/oauth/token”,请求头Authorization(basicToken)如何取值???
8 free, HD, copyright free video material download websites are recommended
Detailed introduction to the usage of Nacos configuration center
[Flutter] dart: class;abstract class;factory;类、抽象类、工厂构造函数
RestCloud ETL 跨库数据聚合运算
What are MySQL locks and classifications
随机推荐
Create + register sub apps_ Define routes, global routes and sub routes
require.context
The sandbox explains its vision for the meta universe platform
Trial setup and use of idea GoLand development tool
Coroutinecontext in kotlin
【教程】chrome关闭跨域策略cors、samesite,跨域带上cookie
Cancellation of collaboration in kotlin, side effects of cancellation and overtime tasks
Servlet中数据传到JSP页面使用el表达式${}无法显示问题
Recommendation letter of "listing situation" -- courage is the most valuable
缺少库while loading shared libraries: libisl.so.15: cannot open shared object file: No such file
詳細些介紹如何通過MQTT協議和華為雲物聯網進行通信
力扣(LeetCode)183. 从不订购的客户(2022.07.02)
Detailed introduction to the deployment and usage of the Nacos registry
Word word word
Su Shimin: 25 principles of work and life
GBase 8c系统表-pg_conversion
SPI mechanism
Awk from introduction to earth (0) overview of awk
Leetcode 183 Customers who never order (2022.07.02)
《上市风云》荐书——唯勇气最可贵