8_HTML5 SVG (4) --[HTML5 API 学习之旅]
SVG 文本
HTML5 中的 SVG（可缩放矢量图形）允许你直接在网页中嵌入图形，并且可以使用 <text> 元素来添加文本到这些图形中。以下是四个带有详细注释的 SVG 文本示例，展示了如何在不同情况下使用 <text> 元素。
示例 1: 基本文本
这个例子展示了如何在 SVG 中添加基本文本。
xml
<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 属性旋转文本。
xml
<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> 元素让文本沿着指定路径排列。
xml
<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: 多行文本与文本对齐
这个例子展示了如何创建多行文本，并设置文本对齐方式。
xml
<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
这个例子展示了如何为一个简单的矩形添加基本的边框。
xml
<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 属性创建虚线边框。
xml
<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 属性来控制线条末端和连接处的形状。
xml
<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 属性来调整边框的透明度和虚线偏移量。
xml
<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 来创建高斯模糊效果。
xml
<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 来创建投影效果。
xml
<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 来调整颜色，例如将图像转换为灰度。
xml
<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 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0
这个矩阵将RGB三个通道以相同比例混合（即0.33），并保持Alpha通道不变（1）。这有效地将图像转换成灰度图像，同时保留其原始透明度。
-->
<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 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)
这个例子展示了如何组合多个滤镜效果，例如同时应用模糊和颜色调整。
xml
<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>
关键点总结
-
高斯模糊 ：
feGaussianBlur元素可以用来创建柔和的模糊效果，stdDeviation属性决定了模糊的程度。 -
投影 ：通过结合
feGaussianBlur、feOffset和feMerge可以创建出自然的投影效果，这在模拟三维场景时非常有用。 -
颜色矩阵 ：
feColorMatrix提供了一种强大的方式来调整颜色，比如转换为灰度、反转颜色或调整饱和度等。 -
组合滤镜效果：你可以通过链式应用多个滤镜元素来创建复杂的效果，如先模糊再调整颜色，或者同时改变多个颜色通道。