SVG简单入门三:基本样式

写到这里,我忽然意识到自己有点孤陋寡闻了,因为我看到现在好多设计师都没有使用 PS 了,而是使用 Sketch 和 AI 之类的失量工具做创作,作品都是支持转成SVG的。

我现在也看到了越来越多的网站,里面使用图片也是SVG , 比如 <image src="xx.svg">import svg from './xx.svg' 等等。效果其实一点也不逊于 png、jpg!

做为一个刚接触SVG编程的小粉,发现SVG适用的领域还很多,还是很欣慰的,也搞清楚了很多事情。比如之前一直不理解SVG为什么需要有这么多种使用样式的方式,现在知道了。

使用样式的方式

1) 内联样式

内联样式应该是前端同志们最熟悉但又最抵制的一种写法。

1
2
3
<rect x="10" y="10" width="80" height="20"
style="stroke:blcak;fill:red;fill-opacity:0.8;"
/>

2) 内部样式

在SVG内部,还可以像HTML这样的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg>
<defs>
<style type="text/css"><![CDATA[
rect{
stroke:blcak;
fill:red;
fill-opacity:0.8;
}

]]</style>
</defs>
<rect x="10" y="10" width="80" height="20"/>
</svg>

3) 外部样式表

这个实际上就是我们的css了,在我们平时的 SVG IN HTML,指的就是 html的 外联css 和 <style> 标签里面的样式。但是做为独立存在的 SVG 想要使用也是可以的,而且写法还很多,以下是三种写法:。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--写法一:使用link -->
<svg xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
<rect x="10" y="10" width="80" height="20"/>
</svg>

<!--写法二支持HTML5的 @include的写法 -->
<svg>
<defs>
<style type="text/css">
@import url(mystyles.css);
</style>
</defs>
<rect x="10" y="10" width="80" height="20"/>
</svg>

<!--写法三:使用xml-stylesheet-->
<?xml-stylesheet href="common.css"?>
<svg>
<rect x="10" y="10" width="80" height="20"/>
</svg>

4) 表现类属性

在SVG里面,有很多样式是可以直接作为表现类属性使用的,比如 fill stroke 等等,而且在SVG的世界里,而且很多表现类属性又同时可以使在样式表。

需要注意的是,如果表现属性设置了样式,那么样式就会覆盖掉表样属性,比如刚才的代码改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg>
<defs>
<style type="text/css"><![CDATA[
rect{
stroke:red;
fill:red;
fill-opacity:0.8;
}

]]</style>
</defs>
<rect stroke="black" x="10" y="10" width="80" height="20"/>
</svg>

它的 stroke="black" 这一段就会被样式 stroke:red 覆盖掉,最终显示为红色。

基本样式

所有样式请参考这里:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute 。(这里的属性太全了,很多属性W3C的规范也没有提到)。

其实基本样式很简单,看的懂HTML的CSS样式,就肯定能看的懂SVG的CSS样式。所以我最第一次接触SVG时,心里上就有这么一个问题:

SVG为什么要另起炉灶,不直接复用HTML的CSS属性就行了呢?

我个人认为是这样:

他们产生的出发点不同,解决的问题也不同,所以实际上是一个没有太在意义的问题,而碰巧他们都是基于XML的文本语言,支持CSS,所以为它们设计的API当然就不同了。
HTML设计时,主要就是解决的就是超文本传输(HTTP)时,数据的展示标记问题,将XML定义成了 <talbe><ul><p><h1> 之类的文档语义型的结构体。
而SVG则是一个图像系统,准确的说是失量图形系统,它可要以一定的比例转变为位图后,才能进行显示,它的设计理念就要以更容易的进行 相关失量计算 而服务了。

虽然二者不同,但实际上有一部份还是共享的,它们可以在 html/css 和 svg/css 里面通用 :

下面是我整理的(只整理了W3C规范内的),只简明的写一下,详细情况可参考上面那个网站 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

与CSS共用型

字体系列
font 复合属性。文本特性
font-family 字体Family
font-size 字体大小
font-size-adjust 用来保证首选字体的x-height值
font-stretch 横向拉伸变形
font-style 字体样式
font-variant (英文字母)大小写转换
font-weight 文本字体的粗细
文本系列
direction 排列方式 : ltr
letter-spacing 字符间格
text-decoration 文本装饰
word-spacing 空格处理方式
其它属性
clip 只支持最外层的SVG元素
color 说明:这个是内置,不是表面上的支持,为fill,storke提供value的
cursor 鼠标移动动作
display 展示模式
visibility (占位)是否展示
overflow 只能适配固定了视口(viewPort)的SVG
CSS3: 官方文档里面把它写成了SVG专用,实际上CSS3已经支持,可以通用了
opacity 透明度
pointer-events 忽略指向事件

SVG 专用型

描边与填充 重点:需要掌握,使用频率最高
stroke ​描边颜色
stroke-width ​笔画宽度
stroke-opacity 笔画透明度
stroke-linecap 线帽
stroke-linejoin 交接
stroke-miterlimit 当线帽设置为 stroke-linejoin=”miter” 才有效,设置最大高度。
stroke-dasharray 自定义虚线缝隙,传一个数组
stroke-dashoffset 虚线开始的位置,支持数字和百分比
fill 填充颜色
fill-opacity 填充透明度
fill-rule 填充规则
渲染及颜色图形
shape-rendering 用于 <path> 可以设置平滑度之类的,用于提高渲染速度
text-rendering 用于 <text> 也是提高平滑度的,感觉都没什么用。
image-rendering 用于 <image> 的渲染模式
color-rendering
color-profile
color-interpolation
color-interpolation-filters
marker 路径上的标记
marker-start 标记开始
marker-mid 标记中间
marker-end 标记结束
剪切、蒙板、渐变、滤镜
clip-path 剪裁图么
clip-rule 剪裁规则
mask 蒙板
stop-color 渐变位置颜色
stop-opacity 渐变位置透明度
filter 使用滤镜
enable-background 使用背景
flood-color 仅适用于 feFlood 滤镜的样式
flood-opacity 仅适用于 feFlood 滤镜的样式
lighting-color 仅适用于 feDiffuseLighting、feSpecularLighting 滤镜的样式
文本
text-anchor 文本相对于文本坐标 x 处的处置。可以理解为对齐方式
writing-mode 书写顺序 :left-to-right, right-to-left, or top-to-bottom
baseline-shift 相对于父结点的baseline
alignment-baseline 相对于父结点的baseline
dominant-baseline 相对于父结点的baseline
glyph-orientation-horizontal 水平字形取向
glyph-orientation-vertical 垂直字形取向
kerning 字距调整,仅用于

小结

通过SVG的填充和描边的CSS定义,可以看出SVG与HTML的绘制方式上的区别。再加上很多常用的CSS可以复用,(再加上大部分的属性很少使用,)所以相对来说,还是非常简单的。