未来Mac下载

mac.macxz.com

SVG基础图形格式~

时间: 浏览次数:4 编辑:zb

一、内置图形:

二、内置图形的html属性或(css样式):三、基本元素用法

1、矩形
基本用法扩展用法

2、圆
基本用法

扩展用法

3、椭圆
基本用法

扩展用法

4、直线
基本用法

扩展用法

5、多边形
基本用法


扩展坐标

第一个点和最后一个点会连接起来,形成闭合的图形

6、折线
基本用法

扩展用法

第一个点不会和最后一个点连起来,不会闭合

四、图形元素用法

1、路径
路径是svg中最强大的图形
路径是由一系列命令所组成。


如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。

基本用法

扩展用法


1.1、贝塞尔曲线(CSQT简称“厕所切图”)
(1)、三次贝塞尔曲线


x1,y1 和x2,y2分别为控制点1和2,而x,y为曲线上的关键点
下面为曲线上的点随着时间的变化而变化的过程。

(2)、光滑三次贝塞尔曲线

S指令跟在C指令或S指令后面补刀,它会自动在C、S基础上生成一个对称点,所以S指令只需要两个点就可以。

(3)、二次贝塞尔曲线


(x1,y1)是控制点,(x,y)表示的是曲线的终点。

下面为曲线上的点随着时间的变化而变化的过程。

(4)、光滑二次贝塞尔曲线

Tx y
T指令和S指令类似,是给Q、T指令补刀的,T指令只有一个曲线终点,没有控制点(由Q的对称点自动生成);
也可以单独使用,当单独使用时,是一条直线;

1.2、圆弧



可以看到设置的x属性覆盖成功了,第二个use的fill也设置成功了,但是第三个use 的stroke没有变成红色,因为circle已经指定了,所以无法覆盖。









可以看到,不仅变大了,而且还向右下角 平移了。
为什么呢?

我们可以看到 viewBox的值为"-5 -5 100 150",(-5 -5)分别表示 最小的x和最小的y,也就是说,左上角原本的(0,0)现在等价于(-5,-5), 那么如果想要时rect 还是在原来的左上角,那么才可以,而如果设置为
就会向右向下平移5px。

然后我们看到viewbox后两个是100 150,分别表示 svg的宽度和高度,即100等同于svg定义的宽度500,150等同于svg定义的高度600,那么在svg容器里面的rect 上设置 width为100,等同于500,高为150,等同于600,这样会有个问题,就是本来rect的长宽比为100:150,而通过viewbox设置后,长宽比会变化, 所以svg默认 即使viewbox宽度比变化了,但是viewbox容器里的元素的长宽比不会变化,会以缩放较小的那个为准。

所以我们可以看到 viewbox相当于 一个比例尺,对原本的svg的位置和宽高 做了相同比例的缩放。

一共有下面的5个元素可以设置 viewbox:
, ,

与viewbox相关的另一个属性是preserveAspectRatio。
如果说viewbox是控制容器里面元素等比缩放的比例尺的话, preserveAspectRatio就是用来指定 是否需要等比缩放,如果不等比缩放,是否需要整个填充。

preserveAspectRatio: []

除了  元素之外,其他元素使用preserveAspectRatio必须在同一元素上为 viewBox 提供的值。如果没有提供属性 viewBox ,则忽略了preserveAspectRatio。

客服QQ:

客服微信

返回顶部