当前位置:网站首页>簡單理解svg
簡單理解svg
2022-07-03 02:21:00 【大船叔叔】
svg
canvas和svg區別
canvas:
- Canvas 是H5新出來的標簽,是畫布.利用JavaScript在網頁繪制圖像.Canvas是逐像素進行渲染的,色彩豐富,縮放失真.
- 修改圖形 需要重繪整個畫布
svg:
- 可縮放的矢量圖形(縮放之後不會失真的圖片格式 Scalable Vector Graphics)
- svg是通過DOM操作來顯示的,svg中每個圖形都是單獨的節點,方便修改樣式.
svg
version:svg 遵循的規範的版本號 1.0 1.1兩個版本
xmlns:定義svg命名規範.
x y錶示開始坐標 width和height錶示矩形的寬度和高度 沒有設置填充顏色之前 默認是黑色 fill設置填充顏色
<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路徑
M:moveTo 移動到某個坐標點
L:lineTo:畫線到某個坐標點
Z:close閉合
stork:線的顏色
stork-width:線的寬度
<path d="M75,20 L100,100,L400,150,Z" fill="pink" stroke="yellow" stroke-width="10"> </path>
// 大寫是絕對定比特 小寫是相對定比特 相對上一個坐標
<path d="M75,20 l50,0,L50,10 Z" fill="" stroke="green" stroke-width=""> </path>
圓
cx和cy定義的是圓心的x y坐標 r代錶半徑
<circle cx="100" cy="50" r="40" fill="" stroke="green" stroke-width="10">
參數分別代錶開始坐標 最大半徑和最小半徑 旋轉角度 大小角弧線(1,0) 順逆時針(1,0) 結束的坐標 x y
<path d="M120,120 A60 60 0 1 1 121 121 Z" fill="" stroke="pink" stroke-width="20"> </path>
svg漸變
id是漸變色唯一的名稱 x1 y1 x2 y2設置的漸變的方向
<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設置填充顏色 id是漸變色的名稱
<rect x="10" y="10" width="200" height="200" fill="url(#grad)" style=""/>
svg動畫
svg動畫由於某些場景不能用,只需要簡單了解即可.
跟css動畫很像
attriName:變形
type:選擇動畫操作方式 這裏是旋轉
form:從哪裏開始
to:從哪裏結束
dur:動畫執行時間
repeatCount:動畫重複次數
<g>
<text x="150" y="100" style="">吃飯 睡覺 </text>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="100"
dur="250ms"
repeatCount="indefinite"/>
</g>
svg文字
定義一個路線 path id作為文字執行路線的名稱 根據id選擇文字根據哪條路線樣式
<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">
陶大花 胖琳 可真是個可人啊一群老六
</textPath>
</text>
边栏推荐
- GBase 8c系统表-pg_class
- Tongda OA homepage portal workbench
- Socket编程
- 《上市风云》荐书——唯勇气最可贵
- [shutter] shutter debugging (debugging control related functions | breakpoint management | code operation control)
- Cfdiv2 fixed point guessing- (interval answer two points)
- Detailed introduction to the usage of Nacos configuration center
- Comment communiquer avec Huawei Cloud IOT via le Protocole mqtt
- 502 (bad gateway) causes and Solutions
- Su Shimin: 25 principles of work and life
猜你喜欢
Stm32f407 ------- IIC communication protocol
[shutter] shutter debugging (debugging control related functions | breakpoint management | code operation control)
Memory pool (understand the process of new developing space from the perspective of kernel)
Wechat applet Development Tool Post net:: Err Proxy Connexion Problèmes d'agent défectueux
Recommendation letter of "listing situation" -- courage is the most valuable
RestCloud ETL 跨库数据聚合运算
easyExcel
机器学习笔记(持续更新中。。。)
easyPOI
Servlet中数据传到JSP页面使用el表达式${}无法显示问题
随机推荐
MySQL学习03
How to deal with cache hot key in redis
[shutter] pull the navigation bar sideways (drawer component | pageview component)
GBase 8c触发器(三)
Current situation and future of Web3 in various countries
[shutter] bottom navigation bar implementation (bottomnavigationbar bottom navigation bar | bottomnavigationbaritem navigation bar entry | pageview)
awk从入门到入土(0)awk概述
Restcloud ETL cross database data aggregation operation
Solution for processing overtime orders (Overtime unpaid)
[Flutter] dart: class; abstract class; factory; Class, abstract class, factory constructor
Flink CDC mongoDB 使用及Flink sql解析monggo中复杂嵌套JSON数据实现
Cancellation of collaboration in kotlin, side effects of cancellation and overtime tasks
How to find summer technical internship in junior year? Are you looking for a large company or a small company for technical internship?
Startup mode and scope builder of collaboration in kotlin
Prohibited package name
GBase 8c系统表-pg_class
缺少库while loading shared libraries: libisl.so.15: cannot open shared object file: No such file
5. File operation
easyExcel
[shutter] top navigation bar implementation (scaffold | defaulttabcontroller | tabbar | tab | tabbarview)