8_HTML5 SVG (4) --[HTML5 API 学习之旅]

SVG 文本

HTML5 中的 SVG（可缩放矢量图形）允许你直接在网页中嵌入图形，并且可以使用 <text> 元素来添加文本到这些图形中。以下是四个带有详细注释的 SVG 文本示例，展示了如何在不同情况下使用 <text> 元素。

示例 1: 基本文本

这个例子展示了如何在 SVG 中添加基本文本。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"><!-- 使用 <text> 元素在指定位置绘制文本。x 和 y 属性定义了文本左下角的位置。font-family 和 font-size 设置了文本的字体和大小。--><text x="10" y="30" font-family="Verdana" font-size="20" fill="blue">Hello, World!</text>
</svg>

在这里插入图片描述

示例 2: 带有旋转效果的文本

这个例子展示了如何通过 transform 属性旋转文本。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 使用 transform 属性中的 rotate 方法来旋转文本。第一个参数是旋转角度，后两个参数是旋转中心点的坐标。--><text x="100" y="100" font-family="Arial" font-size="24" fill="green"transform="rotate(45 100 100)">Rotated Text</text>
</svg>

在这里插入图片描述

示例 3: 沿路径排列的文本

这个例子展示了如何使用 <textPath> 元素让文本沿着指定路径排列。

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- 创建一个SVG画布，宽度为400px，高度为100px。'xmlns' 属性指定了SVG的命名空间，这是必需的。'xmlns:xlink' 指定了XLink命名空间，用于旧版本浏览器中支持 <textPath> 的 'xlink:href' 属性。--><!-- 定义一条路径（path），它将作为文本的轨迹。'id="myPath"' 给这条路径赋予一个唯一的标识符，以便后续引用。'd' 属性定义了路径的数据：- 'M10 80' 表示移动到 (10, 80) 点，这是路径的起点。- 'Q 200 10 390 80' 表示绘制一条二次贝塞尔曲线：- 第一个点 (200, 10) 是控制点，影响曲线的形状但不是路径的一部分。- 第二个点 (390, 80) 是曲线的终点。'stroke="black"' 设置路径的颜色为黑色。'fill="none"' 表示不填充路径内部，只绘制边框。--><path id="myPath" d="M10 80 Q 200 10 390 80" stroke="black" fill="none"/><!-- 使用 <text> 元素来定义一段文本，并使用 <textPath> 子元素让文本沿着之前定义的路径显示。'font-family="Arial"' 设置文本的字体系列为 Arial。'font-size="16"' 设置文本的字体大小为 16px。'fill="red"' 设置文本的颜色为红色。<textPath> 元素中的 'xlink:href="#myPath"' 引用了上面定义的路径 ID (#myPath)，使文本沿该路径排列。注意：在现代浏览器中，你可以直接使用 'href' 而不是 'xlink:href'，但对于某些较老的浏览器，仍需使用 'xlink:href'。--><text font-family="Arial" font-size="16" fill="red"><textPath href="#myPath">Text Along a Path</textPath><!-- 如果需要兼容旧版浏览器，可以使用以下行代替上一行：<textPath xlink:href="#myPath">Text Along a Path</textPath> --></text>
</svg>

在这里插入图片描述

示例 4: 多行文本与文本对齐

这个例子展示了如何创建多行文本，并设置文本对齐方式。

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 创建一个SVG画布，宽度为300px，高度为200px。'xmlns' 属性指定了SVG的命名空间，这是必需的。--><!-- 使用 <text> 元素定义一段文本，并在其中使用多个 <tspan> 子元素来创建多行文本。'x="50"' 和 'y="50"' 设置了文本起始位置的坐标 (50, 50)。'font-family="Helvetica"' 设置文本的字体系列为 Helvetica。'font-size="16"' 设置文本的字体大小为 16px。'fill="purple"' 设置文本的颜色为紫色。<tspan> 元素允许我们对文本的不同部分应用不同的样式或定位。'dy' 属性用于相对于前一个 <tspan> 或父 <text> 的 y 坐标调整当前 <tspan> 的垂直位置。'text-anchor' 属性控制文本相对于其起始位置的对齐方式：- 'start'（默认）表示文本从指定的 x 位置开始。- 'middle' 表示文本中心位于指定的 x 位置。- 'end' 表示文本结束于指定的 x 位置。--><text x="50" y="50" font-family="Helvetica" font-size="16" fill="purple"><!-- 第一行文本，左对齐 --><tspan x="50" dy="1.2em" text-anchor="start">First Line</tspan><!-- 第二行文本，居中对齐 --><tspan x="50" dy="1.2em" text-anchor="middle">Second Line (Centered)</tspan><!-- 第三行文本，右对齐 --><tspan x="50" dy="1.2em" text-anchor="end">Third Line (Right Aligned)</tspan></text>
</svg>

在这里插入图片描述

关键点总结

基本文本：<text> 元素用于在 SVG 中添加文本。你可以通过 x 和 y 属性控制文本的位置，并使用 CSS 样式属性如 font-family、font-size 和 fill 来格式化文本。
旋转文本：transform 属性允许你应用变换，比如旋转文本。rotate() 函数接受一个角度值和一个可选的旋转中心点。
沿路径排列文本：<textPath> 元素使得文本能够沿着预先定义的路径进行排列，提供了一种创意的方式展示文本。
多行文本与文本对齐：<tspan> 元素用于在同一 <text> 元素内创建多个文本行。text-anchor 属性可以用来设置文本相对于其起始位置的对齐方式（开始、中间或结束）。

SVG Stroke 属性

SVG 的 stroke 属性及其相关属性用于定义图形轮廓（边框）的样式。以下是四个带有详细注释的 SVG 示例，展示了如何使用这些属性来定制图形的轮廓。

示例 1: 基本 Stroke

这个例子展示了如何为一个简单的矩形添加基本的边框。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 创建一个矩形，并为其设置 stroke 属性以添加边框。'stroke' 设置边框的颜色。'stroke-width' 设置边框的宽度。--><rect x="50" y="50" width="100" height="100"stroke="blue" stroke-width="5" fill="none"/>
</svg>

在这里插入图片描述

示例 2: Stroke-Dasharray (虚线)

这个例子展示了如何通过 stroke-dasharray 属性创建虚线边框。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 使用 'stroke-dasharray' 来创建虚线效果。数组中的值交替表示实线段和空白段的长度。这里是 [10, 5]，意味着每个实线段长10px，每个空白段长5px。--><circle cx="100" cy="100" r="80"stroke="red" stroke-width="4" stroke-dasharray="10, 5" fill="none"/>
</svg>

在这里插入图片描述

示例 3: Stroke-Linecap 和 Stroke-Linejoin

这个例子展示了如何使用 stroke-linecap 和 stroke-linejoin 属性来控制线条末端和连接处的形状。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 'stroke-linecap' 控制线条末端的样式：- 'butt': 默认，平直末端。- 'round': 圆形末端。- 'square': 方形末端，超出线段长度一半的方形。'stroke-linejoin' 控制两条线相交时的连接样式：- 'miter': 默认，尖角。- 'round': 圆角。- 'bevel': 斜角。--><path d="M20 50 L100 150 L180 50"stroke="green" stroke-width="20" fill="none"stroke-linecap="round" stroke-linejoin="round"/>
</svg>

在这里插入图片描述

示例 4: Stroke-Opacity 和 Stroke-Dashoffset

这个例子展示了如何使用 stroke-opacity 和 stroke-dashoffset 属性来调整边框的透明度和虚线偏移量。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 'stroke-opacity' 控制边框颜色的透明度，范围从 0（完全透明）到 1（完全不透明）。'stroke-dasharray' 创建虚线效果，而 'stroke-dashoffset' 控制虚线模式的起始位置。此处 'stroke-dashoffset' 设置为 '20'，使虚线图案向右移动20个单位。--><rect x="50" y="50" width="100" height="100"stroke="red" stroke-width="5" stroke-opacity="0.5"stroke-dasharray="10, 5" stroke-dashoffset="20" fill="none"/>
</svg>

在这里插入图片描述

关键点总结

基本 Stroke：stroke 和 stroke-width 是最基本的属性，分别用于设置边框的颜色和宽度。
Stroke-Dasharray：此属性允许你创建各种类型的虚线或点线，通过提供一系列数字来定义实线段和空白段的长度。
Stroke-Linecap 和 Stroke-Linejoin：这两个属性用于细化线条末端和线条相交处的样式，提供了更精确的图形设计控制。
Stroke-Opacity 和 Stroke-Dashoffset：stroke-opacity 控制边框颜色的透明度，而 stroke-dashoffset 可以用来调整虚线模式的起始位置，从而实现动画或其他视觉效果。

SVG 滤镜

SVG 滤镜（filters）允许你应用复杂的视觉效果，如模糊、阴影、颜色调整等。以下是四个带有详细注释的 SVG 示例，展示了如何使用滤镜来增强图形效果。

示例 1: 高斯模糊 (Gaussian Blur)

这个例子展示了如何使用 feGaussianBlur 来创建高斯模糊效果。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 定义一个滤镜 --><defs><!-- 创建一个名为 'blur' 的滤镜。'feGaussianBlur' 应用高斯模糊效果。'stdDeviation' 属性控制模糊的程度，值越大越模糊。--><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><!-- 使用定义的滤镜 --><circle cx="100" cy="100" r="80" fill="blue" filter="url(#blur)" />
</svg>

在这里插入图片描述

示例 2: 投影 (Drop Shadow)

这个例子展示了如何使用 feOffset、feGaussianBlur 和 feMerge 来创建投影效果。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 创建一个SVG画布，宽度为200px，高度为200px。'xmlns' 属性指定了SVG的命名空间，这是必需的。--><defs><!-- <defs> 元素用于定义可以在文档中其他地方引用的元素，如滤镜、渐变等。--><!-- 创建一个名为 'drop-shadow' 的滤镜。'id="drop-shadow"' 给滤镜赋予一个唯一的标识符，以便后续引用。滤镜由多个过滤器原语（filter primitives）组成，这些原语按照它们在 <filter> 中出现的顺序依次应用。--><filter id="drop-shadow"><!-- feGaussianBlur 应用高斯模糊效果。'in="SourceAlpha"' 表示使用图形的透明度通道作为输入，这通常用于创建阴影。'stdDeviation="3"' 设置模糊的程度，值越大越模糊。'result="blur"' 定义了一个结果标识符，可以在后续的过滤器原语中引用这个结果。--><feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/><!-- feOffset 移动模糊后的图像以创建阴影效果。'in="blur"' 表示使用前一步骤的结果（即模糊后的图像）作为输入。'dx="40"' 和 'dy="40"' 分别设置水平和垂直方向上的偏移量。'result="offsetBlur"' 定义了偏移后的结果标识符。--><feOffset in="blur" dx="40" dy="40" result="offsetBlur"/><!-- feMerge 将原始图形和阴影合并。<feMergeNode> 子元素决定了合并的顺序。第一个 <feMergeNode> 使用 'in="offsetBlur"' 引用偏移后的模糊图像。第二个 <feMergeNode> 使用 'in="SourceGraphic"' 引用原始图形。--><feMerge><feMergeNode in="offsetBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><!-- 使用定义的滤镜应用于矩形。'x="50"' 和 'y="50"' 设置了矩形左上角的位置。'width="100"' 和 'height="100"' 设置了矩形的尺寸。'fill="green"' 设置了矩形的颜色为绿色。'filter="url(#drop-shadow)"' 引用了之前定义的滤镜 ID (#drop-shadow)，将投影效果应用于矩形。--><rect x="50" y="50" width="100" height="100" fill="green" filter="url(#drop-shadow)" />
</svg>

在这里插入图片描述

示例 3: 颜色矩阵 (Color Matrix)

这个例子展示了如何使用 feColorMatrix 来调整颜色，例如将图像转换为灰度。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 创建一个SVG画布，宽度为200px，高度为200px。'xmlns' 属性指定了SVG的命名空间，这是必需的属性，确保SVG元素被正确解析。--><defs><!-- <defs> 元素用于定义可以在文档中其他地方引用的元素，如滤镜、渐变等。--><!-- 创建一个名为 'grayscale' 的滤镜。'id="grayscale"' 给滤镜赋予一个唯一的标识符，以便后续引用。滤镜由多个过滤器原语（filter primitives）组成，这些原语按照它们在 <filter> 中出现的顺序依次应用。--><filter id="grayscale"><!-- feColorMatrix 应用颜色矩阵变换。'type="matrix"' 表示使用自定义的颜色矩阵进行变换。'values' 属性定义了具体的4x5矩阵，用于将图像转换为灰度。该矩阵的前四列分别对应红色(R)、绿色(G)、蓝色(B)和透明度(A)通道，第五列表示偏移量。这里的值设置为：0.33 0.33 0.33 0 00.33 0.33 0.33 0 00.33 0.33 0.33 0 00    0    0    1 0这个矩阵将RGB三个通道以相同比例混合（即0.33），并保持Alpha通道不变（1）。这有效地将图像转换成灰度图像，同时保留其原始透明度。--><feColorMatrix type="matrix" values="0.33 0.33 0.33 0 00.33 0.33 0.33 0 00.33 0.33 0.33 0 00    0    0    1 0" /></filter></defs><!-- 使用定义的滤镜应用于图像。'href="2.png"' 指向要显示的图片文件路径。'x="0"' 和 'y="0"' 设置了图片左上角的位置。'width="200"' 和 'height="200"' 设置了图片的尺寸。'filter="url(#grayscale)"' 引用了之前定义的滤镜 ID (#grayscale)，将灰度效果应用于图片。--><image href="2.png" x="0" y="0" width="200" height="200" filter="url(#grayscale)" />
</svg>

在这里插入图片描述

示例 4: 组合滤镜效果 (Composite Effects)

这个例子展示了如何组合多个滤镜效果，例如同时应用模糊和颜色调整。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 创建一个SVG画布，宽度为200px，高度为200px。'xmlns' 属性指定了SVG的命名空间，这是必需的。--><defs><!-- <defs> 元素用于定义可以在文档中其他地方引用的元素，如滤镜、渐变等。--><!-- 创建一个名为 'composite-effects' 的滤镜。'id="composite-effects"' 给滤镜赋予一个唯一的标识符，以便后续引用。滤镜由多个过滤器原语（filter primitives）组成，这些原语按照它们在 <filter> 中出现的顺序依次应用。--><filter id="composite-effects"><!-- feGaussianBlur 应用高斯模糊效果。'in="SourceGraphic"' 表示使用原始图形作为输入。'stdDeviation="3"' 设置模糊的程度，值越大越模糊。'result="blurred"' 定义了一个结果标识符，可以在后续的过滤器原语中引用这个结果。--><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurred"/><!-- feColorMatrix 应用颜色矩阵变换。'in="blurred"' 表示使用前一步骤的结果（即模糊后的图像）作为输入。'type="saturate"' 和 'values="2"' 用来增加图像的饱和度，值为2意味着将饱和度加倍。'result="saturated"' 定义了变换后的结果标识符。--><feColorMatrix in="blurred" type="saturate" values="2" result="saturated"/><!-- feComponentTransfer 对颜色通道应用函数，这里是调整亮度。'in="saturated"' 表示使用前一步骤的结果（即增加了饱和度的图像）作为输入。'result="brightened"' 定义了最终结果的标识符。<feFuncR>, <feFuncG>, <feFuncB> 分别对红色、绿色和蓝色通道应用线性函数。'type="linear"' 表示应用线性变换。'slope="1.5"' 增加每个颜色通道的亮度，斜率为1.5意味着亮度增加50%。--><feComponentTransfer in="saturated" result="brightened"><feFuncR type="linear" slope="1.5"/><feFuncG type="linear" slope="1.5"/><feFuncB type="linear" slope="1.5"/></feComponentTransfer></filter></defs><!-- 使用定义的滤镜应用于圆形。'cx="100"' 和 'cy="100"' 设置了圆心的位置。'r="80"' 设置了圆的半径。'fill="orange"' 设置了圆的颜色为橙色。'filter="url(#composite-effects)"' 引用了之前定义的滤镜 ID (#composite-effects)，将组合效果应用于圆形。--><circle cx="100" cy="100" r="80" fill="orange" filter="url(#composite-effects)" />
</svg>