文章目录
  1. 1. 使用样式的方式
    1. 1.1. 1) 内联样式
    2. 1.2. 2) 内部样式
    3. 1.3. 3) 外部样式表
    4. 1.4. 4) 表现类属性
  2. 2. 基本样式
    1. 2.1. 与CSS共用型
    2. 2.2. SVG 专用型
  3. 3. 小结

写到这里,我忽然意识到自己有点孤陋寡闻了,因为我看到现在好多设计师都没有使用 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可以复用,(再加上大部分的属性很少使用,)所以相对来说,还是非常简单的。

文章目录
  1. 1. 使用样式的方式
    1. 1.1. 1) 内联样式
    2. 1.2. 2) 内部样式
    3. 1.3. 3) 外部样式表
    4. 1.4. 4) 表现类属性
  2. 2. 基本样式
    1. 2.1. 与CSS共用型
    2. 2.2. SVG 专用型
  3. 3. 小结