SVG小记——入门，clipPath

SVG是可缩放矢量图形
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或缩小（改变尺寸）的情况下，其图形质量不会受受损失
SVG是W3C的一个标准

使用SVG的优势在于：

• SVG可被非常多的工具读取和修改（比如记事本）
• SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG是可伸缩的
• SVG图像可在任何的分辨率下被高质量地打印
• SVG可在图像质量不下降的情况下被放大
• SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG可以与Java技术一起运行
• SVG是开放的标准
• SVG文件是纯粹的XML

SVG图像嵌入到HTML文件有多种方法：

1. 使用<iframe>元素来嵌入SVG图像
2. 使用<img>元素来嵌入SVG图像
3. 将SVG图像作为背景图像嵌入
4. 直接使用元素
5. 使用元素来嵌入SVG图像
6. 使用元素来嵌入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>元素也不会直接呈现。