初识svg(一)

By
In 杂碎
2020-08-06
网络

作为一个伪前端爱好者,怎么能不识大名鼎鼎的SVG呢,说来也惭愧,平时可能还是用的少。近期看很多国外网站,简直用svg有点丧心病狂的多。我个人觉得适当使用还是有些必要的,有些地方能使用图片就使用图片,当然用svg可能显示的效果更佳。

我希望这也是我的一个学习机会,当然是自学了。从基础开始吧,很多地方是直接摘抄网络上一些教程的,对于一些别的知识比如(svg的优势,发展史就不在累赘了),着重了解他的使用方法,确切说是在html页面里的使用方法。

svg定义

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

SVG 使用 XML 格式定义图像。

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

SVG如何在html页面中使用呢?

SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。

我觉得这三种方式都不太好,所以一般都使用如下格式

<svg  xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>

</svg>

以上是一个简单实例,画了一个正方形,左上角坐标在横轴10像素,纵轴10像素,宽高各100像素,红色边框,蓝色填充。

svg和其它html标记一样,成对出现。

SVG 坐标系统

和很多计算机绘图所使用的坐标系统一样,SVG 也使用了网格坐标系统。这种坐标系有如下几个特点: 以左上角为坐标系的原点(0,0) X 轴的正方向向右,从 0,0 点开始向右, x 逐渐增大。Y 轴的正方向向下,从 0,0 点开始向下, y 逐渐增大。 坐标默认以像素为单位。

坐标系统单位

可以指定SVG坐标系中1个单位对应的单位。您可以在任何可以指定坐标(x和y位置,width和height等)的地方执行此操作。您可以在值后指定单位,例如10cm或125mm。

如果在坐标值后未指定任何单位,则假定该单位为像素(px)。

这是可以与SVG元素一起使用的单位的列表:em,ex,px,pt,pc,cm,mm

<svg>在width和height 属性中 在元素上设置的单位仅影响该<svg> 元素(视口)。<svg>元素内的形状必须设置自己的单位。同样,如果未指定单位,则默认单位为像素。

了解时区
SVG基本形状