目录

SVG XML 格式定义图形入门介绍

SVG

SVG means Scalable Vector Graphics.

  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准

Hello World

  • Use SVG in html

and you can see:

  • Link to the SVG file You can use <a> tag to link to the svg file, like this:
xml 复制代码
<a href="rect.svg">rect.svg</a>

rect.svg

Shape

There some pre-shapes:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

Rect
Line
Polygon

the fill-rule

Polyline
Path

Some Commands

所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位

复制代码
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Text

text zh_CN

  • Common text

Hello SVG Hello SVG

rotate(<rotate-angle> [<cx> <cy>])
Hello SVG Hello SVG

  • Text with path

I love SVG I love SVG

I love SVG I love SVG

  • <tspan>

元素可以安排任何分小组与<tspan>元素的数量
Several lines: First line Second line Several lines: First line Second line

Stroke

  • Stroke 属性定义一条线,文本或元素轮廓颜色

g元素这样的将多个元素组织在一起的元素

  • stroke-width 属性定义了一条线,文本或元素轮廓厚度

  • stroke-linecap 属性定义不同类型的开放路径的终结

  • stroke-dasharray 创建不同的虚线

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
有来技术23 分钟前
全栈架构后端攻坚:基于 youlai - boot(开源)、Spring Boot 3 与 Spring Security 6 实现企业级权限系统全功能实战手册
java·spring boot·后端
烁34741 分钟前
每日一题(小白)暴力娱乐篇23
java·开发语言·算法·娱乐
helloworld_工程师1 小时前
Spring AI应用:利用DeepSeek+嵌入模型+Milvus向量数据库实现检索增强生成--RAG应用(超详细)
java·后端
顾林海1 小时前
深度解析TreeSet工作原理
android·java·面试
花木凋零成兰1 小时前
驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
java·安全·ssl
振鹏Dong1 小时前
剖析Spring中的设计模式(一) | 工厂&观察者
java·spring·设计模式
LUCIAZZZ1 小时前
总结一下常见的EasyExcel面试题
java·spring·操作系统·springboot·poi·easyexcel
猿java1 小时前
为什么说缓存是把双刃剑?
java·后端·面试
绿柱石1 小时前
华为ar1200修改con口密码
java·华为·ffmpeg
得物技术1 小时前
DPP推荐引擎架构升级演进之路|得物技术
java·算法·ab测试