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 创建不同的虚线

相关推荐
水痕016 分钟前
gin结合minio来做文件存储
java·eureka·gin
寒士obj15 分钟前
Spring事物
java·spring
柯南二号1 小时前
【Java后端】Spring Boot 集成 MyBatis-Plus 全攻略
java·spring boot·mybatis
桦说编程9 小时前
Java 中如何创建不可变类型
java·后端·函数式编程
lifallen9 小时前
Java Stream sort算子实现:SortedOps
java·开发语言
IT毕设实战小研9 小时前
基于Spring Boot 4s店车辆管理系统 租车管理系统 停车位管理系统 智慧车辆管理系统
java·开发语言·spring boot·后端·spring·毕业设计·课程设计
没有bug.的程序员9 小时前
JVM 总览与运行原理:深入Java虚拟机的核心引擎
java·jvm·python·虚拟机
甄超锋10 小时前
Java ArrayList的介绍及用法
java·windows·spring boot·python·spring·spring cloud·tomcat
阿华的代码王国10 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
Zyy~10 小时前
《设计模式》装饰模式
java·设计模式