用SVG实现简单的文字描边重绘

SVG

发布日期: 2017-02-06

文章字数: 1.2k

阅读时长: 5 分

阅读次数:

SVG 指可伸缩矢量图形 (Scalable Vector Graphics),SVG 是使用 XML 来描述二维图形和绘图程序的语言。
本篇内容只介绍一些本次实例要用到的属性具体请看 W3cschool 。

1. 需要以下语言配合配合实现：

HTML5
CSS3
javascript

2. 它的优势主要有：

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

3. 支持程度：

Internet Explorer9（IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。）
火狐
谷歌Chrome
Opera
Safari

4. 如何创建：

由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。

5. 使用案例：

方法一：

老方法

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。第二和第三行引用了这个外部的 SVG DTD。
该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 
文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。SVG 的 <circle> 用来创建一个圆。
cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。stroke 和 stroke-width 
属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。</svg>

注释：所有的开启标签必须有关闭标签！

方法二:

直接在HTML嵌入SVG代码

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 

</body>
</html>

6.SVG 路径

元素应该是 SVG 中最常见的形状。你可以通过 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状。

元素用于定义一个路径。下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic 贝塞尔 curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

7.Stroke 属性

stroke
stroke-width
stroke-linecap
stroke-dasharray

所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

</body>
</html>

8.文本

<text> 元素用于定义文本。

9.最后演示一个文本描边重绘的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>svg</title>
        <style type="text/css">
            .texthjh{
                font-size: 50px;
                font-weight: bold;
                text-transform: uppercase;
                fill: none;
                stroke-width: 1px;
                stroke-dasharray: 90 310;
                animation: stroke 10s infinite linear;
            }
            .texthjh-1{
                stroke: red;
                text-shadow: 0 0 2px #3498db;
                animation-delay: 1.5s;
            }
            .texthjh-2{
                stroke: #f39c12;
                animation-delay: -3s;
            }
            .texthjh-3{
                stroke: #e74c3c;
                animation-delay: -4.5s;
            }
            .texthjh-4{
                stroke: #9b59b6;
                animation-delay: -6s;
            }
            .texthjh-5{
                stroke: red;
                animation-delay: -1.5s;
            }
            @keyframes stroke {
              100% {
                stroke-dashoffset: -400;
              }
            }
        </style>
    </head>
    <body>
        <svg width="100%" height="100%">
            <text text-anchor="middle" x="50%" y="50%" class="texthjh texthjh-1">
                三 叶 雨
            </text>
            <text text-anchor="middle" x="50%" y="50%" class="texthjh texthjh-2">
                三 叶 雨
            </text>
            <text text-anchor="middle" x="50%" y="50%" class="texthjh texthjh-3">
            三 叶 雨
            </text>
            <text text-anchor="middle" x="50%" y="50%" class="texthjh texthjh-4">
                三 叶 雨
            </text>
            <text text-anchor="middle" x="50%" y="50%" class="texthjh texthjh-5">
                三 叶 雨
            </text>
        </svg>
    </body>
</html>