SVG是可缩放矢量图形
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失
SVG是W3C的一个标准
使用SVG的优势在于:
- SVG可被非常多的工具读取和修改(比如记事本)
- SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
- SVG是可伸缩的
- SVG图像可在任何的分辨率下被高质量地打印
- SVG可在图像质量不下降的情况下被放大
- SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG可以与Java技术一起运行
- SVG是开放的标准
- SVG文件是纯粹的XML
SVG图像嵌入到HTML文件有多种方法:
- 使用
<iframe>
元素来嵌入SVG图像 - 使用
<img>
元素来嵌入SVG图像 - 将SVG图像作为背景图像嵌入
- 直接使用元素
- 使用元素来嵌入SVG图像
- 使用元素来嵌入SVG图像
建议平时使用<img>
和<svg>
这两种方式。如果你的SVG图像是给元素做背景图时,可使用background-image方式引入。
SVG文件结构
SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg文件格式,或者直接在.html文件中放置 <svg>
元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。
SVG图形
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
</svg>
ViewBox——这个值允许我们指定一组图像伸展开来适应一个特定的容器元素。viewBox属性的值是一个包含四个数字的列表。min-x,min-y,width,height
<circle cx="50" cy="50" r="50"></circle>
<rect x="0" y="0" width="200" height="100"></rect>
<polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
<path d="M 0 0 H 200 V 200 H 0 Z"></path>
path:万能的图形,可以用来创建任意的形状。所有基础图形都能由它来创建。
- M x y:移动到坐标x-y
- L x y:从当前位置画一条直线到坐标x—y
- H x:从当前位置画一条水平线到坐标x
- V y:从当前位置画一条垂直线到坐标y
- Z:闭合路径
<path d="M 0 0 C 50 100, 150 100, 200 0"/>
贝塞尔曲线上,通过“M”定义一个起点,然后通过“C”开始一个贝塞尔曲线。
一个贝塞尔曲线是由起点、终点、以及让我们从起点和终点来作正切线的两个坐标来定义。
添加样式
- fill:元素的填充颜色
- fill-opacity:元素的填充颜色透明度
- stroke:元素的笔画颜色
- stroke-width:元素的笔画宽度
- stroke-width:元素的笔画宽度
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle>
</svg>
.circle {transition: stroke 0.3s, fill 0.3s;}
.circle:hover {stroke: #3399cc;fill: #333333;}
CSS中的剪切——clip-path属性
/* SVG中的clipPath的使用 */
.element {
clip-path: url(#svgClipPathID);
}
/* 使用CSS中的基本图形函数 */
.element {
clip-path: polygon(...); /* 或者其他的图形函数 */
}
文本路径剪切图
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="230px" font-weight="700" font-style="italic"> Blossom </text>
</clipPath>
</defs>
</svg>
一个剪切路径的参考盒子
除了剪切路径本身,还可以给剪切路径应用一个<basic-shape>
定义一个剪切路径的参考盒子。
参考盒子只能使用CSS的clip-path
来指定形状路径,而不能使用SVG的<clipPath>
。
对于SVG的<clipPath>
参考盒子是一个border-box元素
。
- 如果是一个HTML元素被剪切,可以使用四种盒模型:margin-box、border-box、padding-box和content-box。
- 如果制作的剪切路径运用在一个SVG元素上,参考盒子可以设置为下面三种的其中一种:
- fill-box:使用对象的边缘做为参考盒子
- stroke-box:使用路径做为参考盒子
- view-box:如果没有指定viewBox将使用最近的SVG视窗做为参考盒子
如果viewBox的确创建了,则会根据viewBox的原点坐标和维度来创建参考盒子
.element {
clip-path: polygon(...) padding-box;
}
SVG中的剪切——元素
<svg>
<defs>
<clipPath id="myClippingPath">
<!-- ... -->
</clipPath>
</defs>
<g id="my-graphic" clip-path="url(#myClippingPath)">
<!-- ... -->
</g>
</svg>
<clipPath>
元素中的内容可以是描述性的(如<title>,<desc>,<metadata>
)。也可以是图形(如:<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>或者<text>
)。
一个<clipPath>
可以包含一个<use>
元素或者<script>
。
注意,在<clipPath>
元素中使用<use>
元素,只能引用一些简单的SVG的图形,它在<clipPath>
内不能用于群体的参照,它是没办法正常工作的。
<clipPath>
可以包括一个使用<animate>,<animateColor>,<animateMotion>,<animateTransform>或<set>
创建的动画。
clipPathUnits属性
<clipPath>
元素包括很多个属性,比如id,class,transform和fill和stroke等,其中最有用的是clipPathUnits属性。
clipPathUnits
主要用来给<clipPath>
元素内容指定一个坐标系统。它具有两个值:
- userSpaceOnUse(默认值):当clipPath元素是用来当作参考物时,clipPath元素内容是以用户坐标系统作为参考点
- objectBoundingBox:当你设置了objectBoundingBox值后,
<clipPath>
元素中的内容必须在指定的坐标[0,1]内。
<clipPath>
元素不会直接在页面上呈现,他唯一的作用就是可以通过clip-path来引用。
display属性不能运用于<clipPath>
元素上,因此,就算display设置none外的其他值,<clipPath>
元素也不会直接呈现。