5 分钟速通 SVG
<h2 id="前言">前言</h2><p><strong>SVG</strong>对不少前端来说就是一个熟悉的陌生人，此篇博客是我学习完<strong>SVG</strong>后做的一个小总结，帮助我快速回忆<strong>SVG</strong>相关内容。</p>
<p>它不能帮你精通 <strong>SVG</strong>，但是可以帮你快速了解<strong>SVG</strong>的一些核心内容，不会迷失在一些细枝末节的设定中，让你对 <strong>SVG</strong> 有一个大概的认识。</p>
<h2 id="基础">基础</h2>
<p><strong>SVG</strong>，<strong>全名 Scalable Vector Graphics</strong>，是可缩放的矢量图形，可以随意放大缩小并且不失真，最重要的是体积也很小。</p>
<p><strong>SVG</strong> 是一种<strong>XML</strong>语言，由 <strong>svg</strong> 根元素和一些基本形状元素构成，另外还有一个 <strong>g</strong> 元素将基本形状元素编组，支持渐变、旋转、动画、滤镜等效果，且能与 js 进行交互。</p>
<p>通常我们使用的 <strong>SVG</strong> 指的是 <strong>SVG1.1</strong>,而不是 <strong>SVG2.0</strong>，因为它的浏览器支持度不够。</p>
<p>我们先给出一个 MDN 上的简单示例：</p>
<pre><code><svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
</code></pre>
<p>效果是：</p>
<p><img src="https://img2022.cnblogs.com/blog/746209/202211/746209-20221115170955141-1356552257.png" alt="" loading="lazy"></p>
<p><strong>svg</strong> 根元素上的这些除了宽高算是固定格式，下面的三个元素分别是矩形，圆和文字，每个元素上都有坐标定位，上面有些属性用来改变它的位置、大小和填充颜色。</p>
<p><strong>svg</strong> 的基本图形元素有：</p>
<pre><code>* rect 矩形
* circle 圆形
* ellipse 椭圆
* line 直线
* polyline 折线
* polygon 多边形
* path 路径
</code></pre>
<p>知道有这么多元素就行了，具体属性看相关文档，不用细究。</p>
<p>前 6 种元素全部可以用 <strong>path</strong> 实现，但是为了语义化容易读懂，可以尽量用前 6 种。</p>
<p>现在着重讲一下 <strong>path</strong>。</p>
<h2 id="路径-path">路径 path</h2>
<p><strong>path</strong> 是 <strong>svg</strong> 基础形状中最强大的一个，可以很容易绘制直线，曲线，弧线。</p>
<p>先给个示例：</p>
<pre><code><svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/>
</svg>
</code></pre>
<p>效果是：</p>
<p><img src="https://img2022.cnblogs.com/blog/746209/202211/746209-20221115171021427-1538279086.png" alt="" loading="lazy"></p>
<p>示例中的 <strong>path</strong> 元素上，<strong>fill</strong> 和 <strong>stroke</strong> 对前端来说应该容易理解，就是填充和线条颜色，但它定义形状的核心属性<strong>d</strong>看起来就很容易让人眼前一懵。</p>
<p><strong>d</strong>表示一系列的路径命令，而<strong>SVG</strong>的六种路径命令类型如下：</p>
<ul>
<li>移动到：M、m</li>
<li>画线至：L、l、H、h、V、v</li>
<li>三次方贝塞尔曲线：C、c、S、s</li>
<li>二次方贝塞尔曲线：Q、q、T、t</li>
<li>椭圆曲线：A、a</li>
<li>封闭路径：Z、z</li>
</ul>
<p>操作就是使用移动命令移动到指定的点，然后使用剩下的几个路径来绘制线条。</p>
<p>然后我们解析一下上方的<strong>SVG</strong>例子：</p>
<ul>
<li>使用移动命令 M 10 10 将画笔移动到横坐标 10，纵坐标 10 的位置</li>
<li>使用画线命令 H 90 向右横向绘制一条直线，这条直线的纵坐标不变，横坐标终点是 90，此时画笔的位置到了横坐标 90，纵坐标 10 的位置</li>
<li>再使用画线命令 V 90 向下纵向绘制一条直线，这条直线的横坐标不变，纵坐标重点为 90，此时画笔的位置到了横坐标 90，纵坐标 90 的位置</li>
<li>最后使用画线命令 L 10 10 ，从当前坐标位置绘制一条到横坐标 10，纵坐标 10 的直线。</li>
</ul>
<p>最后我们得到的结果就是一个位于横坐标 10、纵坐标 10 位置的宽为 80 的正方形。</p>
<p>最后得提一下封闭路径 <strong>Z</strong> 这个特殊命令，它没有参数，作用是从当前路径绘制一条直线到路径的第一个点。</p>
<h2 id="渐变和文字">渐变和文字</h2>
<p>渐变元素</p>
<ul>
<li>linearGradient 线性渐变</li>
<li>radialGradient 径向渐变</li>
</ul>
<p>用到自己看文档，了解有这么个东西就行了。</p>
<p>文字 text 元素 同理。</p>
<h2 id="g-分组">g 分组</h2>
<p>元素<strong>g</strong>是用来组合对象的容器。添加到<strong>g</strong>元素的属性会被其所有的子元素继承。</p>
<p>也就是说你可以使用该元素对一批形状进行批量的上色和变换操作。</p>
<p>上个例子：</p>
<pre><code><svg width="100%" height="100%" viewBox="0 0 95 50"
xmlns="http://www.w3.org/2000/svg">
<g stroke="green" fill="white" stroke-width="5">
<circle cx="25" cy="25" r="15" />
<circle cx="40" cy="25" r="15" />
<circle cx="55" cy="25" r="15" />
<circle cx="70" cy="25" r="15" />
</g>
</svg>
</code></pre>
<h2 id="patterns-图案">patterns 图案</h2>
<p>先来一个使用示例：</p>
<pre><code><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white"/>
<stop offset="95%" stop-color="blue"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="red"/>
<stop offset="95%" stop-color="orange"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
<rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
</svg>
</code></pre>
<p>注意看，渐变元素和图案元素都需要放在 defs 元素内，相当于一个定义，然后实际使用的时候用 fill 属性。</p>
<p>patterns 元素可以认为是对多个图形元素的一个封装，主要是为了进行复用。</p>
<h2 id="其他功能">其他功能</h2>
<p>还有一些其他功能，如：</p>
<ul>
<li>属性 transform ，类同与同名 CSS 属性，进行位移，缩放，旋转</li>
<li>属性 fill 和 stroke，填充和边框</li>
<li>裁剪元素 clipPath，遮罩元素 mask ，同样放在 defs 元素中</li>
<li>滤镜元素 filter</li>
</ul>
<p>这些功能不影响大多数情况的使用，用到了直接查文档即可。</p>
<p>SVG 动画的话 IE11 不支持，保险起见可以不用，不过还是列出来一下，它们一般都是被嵌套在形状元素中来使用：</p>
<ul>
<li>animate 元素 定义一个元素的某个属性如何踩着时点改变</li>
<li>animateMotion 元素 定义了一个元素如何沿着运动路径进行移动，很像 path</li>
<li>animateTransform 元素 控制动画的转换、缩放、旋转或斜切。</li>
</ul>
<p>至于其他的什么字体之类细枝末节的东西略过吧，平常如果涉及到这类处理我们可能就用 svg 图片了，而不是直接使用 svg。</p>
<h2 id="总结">总结</h2>
<p>5 分钟速通 SVG 完毕，相信你已经对 SVG 有了一个稍微全面一点的了解。</p>
<p>通不通无所谓，你就说快不快吧。</p>
</div>
<div id="MySignature" role="contentinfo">
作者：韩子卢
<br/>
出处：https://www.cnblogs.com/vvjiang/
<br/>
本博客文章均为作者原创，转载请注明作者和原文链接。<br><br>
来源：https://www.cnblogs.com/vvjiang/p/16893102.html
頁:
[1]