这篇文章介绍了SVG XML 格式定义图形入门介绍，分享给大家做个参考，收藏Java资料网收获更多编程知识

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:

<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

• Rotate

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

• Text with path

I love SVG I love SVG

• <tspan>

元素可以安排任何分小组与<tspan>元素的数量

Stroke

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

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

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

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

• stroke-dasharray 创建不同的虚线

文章来源:https://www.cnblogs.com/houbbBlogs/p/18105349
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！