当前位置: 首页 > >

SVG基础图形格式~

发布时间:

SVG基础图形格式~


一、内置图形:

二、内置图形的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。


请继续关注‘未来软件园’



友情链接: