9_HTML5 SVG (5) --[HTML5 API 学习之旅]

SVG__0">SVG 模糊效果

HTML5中的SVG（可缩放矢量图形）允许我们创建高质量的二维图形，包括应用各种滤镜效果。模糊效果是通过<feGaussianBlur>滤镜原语来实现的。下面我将给出4个使用SVG进行模糊效果处理的示例，并为每个代码段添加详细的注释。

示例1：基本模糊效果

<!-- 创建一个SVG元素 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 定义一个滤镜，ID为blurEffect --><defs><filter id="blurEffect"><!-- 使用feGaussianBlur对目标对象进行模糊处理 --><!-- stdDeviation定义了模糊的程度，值越大越模糊 --><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><!-- 应用滤镜到矩形上 --><rect x="50" y="50" width="100" height="100" style="fill:blue;" filter="url(#blurEffect)" />
</svg>

在这里插入图片描述

示例2：不同方向的模糊

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 定义一个具有不同X和Y轴模糊程度的滤镜 --><filter id="directionalBlur"><!-- 分别设置stdDeviation的x和y值，以获得不同的水平和垂直模糊效果 --><feGaussianBlur in="SourceGraphic" stdDeviation="10 5" /></filter></defs><!-- 矩形应用了不同方向的模糊效果 --><rect x="50" y="50" width="100" height="100" style="fill:green;" filter="url(#directionalBlur)" />
</svg>

在这里插入图片描述

示例3：多重模糊效果

<!-- SVG容器 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 定义一个组合滤镜，包含两个连续的模糊操作 --><filter id="multiBlur"><!-- 第一次模糊 --><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur1"/><!-- 第二次模糊，基于第一次模糊的结果 --><feGaussianBlur in="blur1" stdDeviation="6" /></filter></defs><!-- 圆形应用了双重模糊效果 --><circle cx="100" cy="100" r="50" style="fill:red;" filter="url(#multiBlur)" />
</svg>

在这里插入图片描述

示例4：模糊与颜色混合

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 定义一个复杂的滤镜，先模糊后改变颜色 --><filter id="blurAndColor"><!-- 模糊处理 --><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blurred"/><!-- 将模糊后的图像的颜色变为蓝色 --><feFlood flood-color="blue" result="color"/><!-- 将模糊效果与颜色相乘 --><feComposite in="blurred" in2="color" operator="in" /></filter></defs><!-- 文本应用了模糊和颜色混合的效果 --><text x="50%" y="50%" font-size="24" fill="red" text-anchor="middle" filter="url(#blurAndColor)">Hello World</text>
</svg>

在这里插入图片描述

这些示例展示了如何在SVG中利用<feGaussianBlur>滤镜原语来创建不同的模糊效果。你可以根据需要调整stdDeviation属性的值来控制模糊强度，或者结合其他滤镜原语创造更加复杂的效果。

SVG__95">SVG 阴影

HTML5中的SVG（可缩放矢量图形）允许我们创建高质量的二维图形，包括应用各种滤镜效果。阴影效果是通过<feDropShadow>滤镜原语来实现的。下面我将给出4个使用SVG进行阴影效果处理的示例，并为每个代码段添加详细的注释。

示例1：基本阴影效果

<!-- 创建一个SVG元素，并设定其宽度和高度 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 --><defs><!-- 定义一个滤镜效果，给它一个唯一的ID以便引用 --><filter id="basicShadow"><!-- feDropShadow用于创建阴影效果 --><!-- 属性解释：dx: 阴影相对于目标对象在X轴上的偏移量，正值表示向右移动dy: 阴影相对于目标对象在Y轴上的偏移量，正值表示向下移动stdDeviation: 定义了阴影边缘的模糊程度，值越大越模糊flood-color: 设置阴影的颜色，默认是黑色（black）--><feDropShadow dx="4" dy="4" stdDeviation="2" flood-color="black"/></filter></defs><!-- 在SVG画布上绘制一个矩形 --><!-- 属性解释：x: 矩形左上角的X坐标y: 矩形左上角的Y坐标width: 矩形的宽度height: 矩形的高度style: CSS样式属性，这里用来设置填充颜色（fill）filter: 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID--><rect x="50" y="50" width="100" height="100" style="fill:blue;" filter="url(#basicShadow)" />
</svg>

在这里插入图片描述

示例2：彩色阴影

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 --><defs><!-- 定义一个具有特定颜色（红色）阴影效果的滤镜，并给它一个唯一的ID以便引用 --><filter id="coloredShadow"><!-- feDropShadow用于创建阴影效果。属性解释：dx: 阴影相对于目标对象在X轴上的偏移量。正值表示阴影向右移动；这里设置为6。dy: 阴影相对于目标对象在Y轴上的偏移量。正值表示阴影向下移动；这里也设置为6。stdDeviation: 定义了阴影边缘的模糊程度。值越大，阴影越模糊；这里设置为3。flood-color: 设置阴影的颜色；这里设置为红色（red），使得阴影呈现红色。--><feDropShadow dx="6" dy="6" stdDeviation="3" flood-color="red"/></filter></defs><!-- 在SVG画布上绘制一个圆形，并应用之前定义的红色阴影效果 --><!-- 属性解释：cx: 圆心的X坐标，这里设置为100，意味着圆心位于画布水平方向的中间位置。cy: 圆心的Y坐标，这里设置为100，意味着圆心位于画布垂直方向的中间位置。r: 圆的半径，这里设置为50。style: CSS样式属性，这里用来设置填充颜色（fill）；这里设置为绿色（green），所以圆形将被填充为绿色。filter: 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID；这里引用的是具有红色阴影效果的滤镜。--><circle cx="100" cy="100" r="50" style="fill:green;" filter="url(#coloredShadow)" />
</svg>

在这里插入图片描述

示例3：多重阴影效果

<!-- SVG容器 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 定义一个组合滤镜，包含两个连续的阴影操作 --><filter id="multiShadow"><!-- 第一次阴影，较小的偏移和模糊 --><feDropShadow dx="4" dy="4" stdDeviation="2" flood-color="rgba(0,0,0,0.5)" result="shadow1"/><!-- 第二次阴影，较大的偏移和模糊 --><feDropShadow in="SourceGraphic" dx="8" dy="8" stdDeviation="6" flood-color="rgba(0,0,0,0.7)" /></filter></defs><!-- 矩形应用了双重阴影效果 --><rect x="50" y="50" width="100" height="100" style="fill:yellow;" filter="url(#multiShadow)" />
</svg>

在这里插入图片描述

示例4：内阴影效果

<!-- SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 使用<defs>元素定义图形对象或样式，这些不会直接渲染到画布上，而是作为后续引用的资源 --><defs><!-- 定义一个用于创建内阴影效果的复杂滤镜，并给它一个唯一的ID以便引用 --><filter id="innerShadow"><!-- feComponentTransfer：对图像的颜色分量进行变换。in="SourceAlpha"：表示使用源图形的透明度（alpha通道）作为输入。result="source-alpha"：为这个操作的结果命名，以便在后续步骤中引用。feFuncA type="table" tableValues="1 0"：反转alpha通道，将完全透明变为完全不透明，反之亦然。这一步是为了创建一个与原始图形形状相同但颜色为黑色的副本，用于生成阴影。--><feComponentTransfer in="SourceAlpha" result="source-alpha"><feFuncA type="table" tableValues="1 0"/></feComponentTransfer><!-- feGaussianBlur：应用高斯模糊效果。in="source-alpha"：表示使用之前创建的"source-alpha"作为模糊操作的输入。stdDeviation="3"：设置模糊的标准偏差，值越大，模糊越强；这里设置为3。result="blurred"：为这个模糊操作的结果命名，以便在后续步骤中引用。--><feGaussianBlur in="source-alpha" stdDeviation="3" result="blurred"/><!-- 再次使用feComponentTransfer，这次是反相模糊后的图像，以获得内部阴影的效果。in="blurred"：表示使用之前创建的模糊图像作为输入。result="inverted"：为这个反相操作的结果命名，以便在后续步骤中引用。feFuncA type="table" tableValues="0 1"：再次反转alpha通道，将之前的完全不透明变为完全透明，从而创建出内阴影效果。--><feComponentTransfer in="blurred" result="inverted"><feFuncA type="table" tableValues="0 1"/></feComponentTransfer><!-- feComposite：组合两个图形。in2="inverted"：表示使用"inverted"作为第二个输入。in="SourceGraphic"：表示使用原始图形作为第一个输入。operator="over"：指定组合方式，这里是将"inverted"放在原始图形之下，模拟出内阴影的效果。--><feComposite in2="inverted" in="SourceGraphic" operator="over"/></filter></defs><!-- 在SVG画布上绘制文本，并应用之前定义的内阴影效果 --><!-- 属性解释：x="50%" y="50%": 设置文本的位置，这里的百分比是相对于SVG画布的宽度和高度，意味着文本会位于画布的中心。font-size="24": 设置文本字体大小为24像素。fill="white": 设置文本颜色为白色。text-anchor="middle": 设置文本的锚点为中间，确保文本水平居中。filter="url(#innerShadow)": 引用之前定义的滤镜效果，通过url()函数指定滤镜的ID；这里引用的是具有内阴影效果的滤镜。--><text x="50%" y="50%" font-size="24" fill="white" text-anchor="middle" filter="url(#innerShadow)">Inner Shadow</text>
</svg>

在这里插入图片描述

这些示例展示了如何在SVG中利用<feDropShadow>滤镜原语来创建不同的阴影效果。你可以根据需要调整dx、dy和stdDeviation属性的值来控制阴影的位置和模糊强度，或者结合其他滤镜原语创造更加复杂的效果，如内阴影。

SVG____254">SVG 渐变 - 线性

当然，下面是四个使用HTML5的SVG创建线性渐变的例子，并附有详细注释以帮助理解。

示例 1: 基本线性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- <defs>元素用于定义可以在SVG中重用的对象，如渐变、模式或滤镜。这些对象不会直接渲染到画布上 --><defs><!-- 定义一个线性渐变，并给它一个唯一的ID（grad1），以便在后续引用 --><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><!-- 属性解释：x1, y1: 渐变起点的坐标（左上角），这里设置为(0%, 0%)表示从画布的左上角开始。x2, y2: 渐变终点的坐标（右上角），这里设置为(100%, 0%)表示到画布的右上角结束。这意味着渐变方向是从左到右的水平渐变。--><!-- 定义渐变的颜色停止点（stop）。颜色从红色逐渐过渡到黄色 --><!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） --><stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /><!-- 第二个颜色停止点位于渐变的结束位置（offset="100%"），颜色为黄色（rgb(255,255,0)），不透明度同样为1 --><stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" /></linearGradient></defs><!-- 在SVG画布上绘制一个矩形，并使用之前定义的线性渐变填充 --><!-- 属性解释：width, height: 设置矩形的宽度和高度，这里与SVG画布相同，即200x200像素。fill: 使用url()函数引用之前定义的渐变（grad1），作为矩形的填充样式。--><rect width="200" height="200" fill="url(#grad1)" />
</svg>

在这里插入图片描述

示例 2: 竖直方向渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 创建一个竖直方向的线性渐变，id为'grad2' --><linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><!-- 渐变颜色从蓝色到绿色 --><stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" /></linearGradient></defs><rect width="200" height="200" fill="url(#grad2)" />
</svg>

在这里插入图片描述

示例 3: 多色渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 创建一个多色线性渐变，id为'grad3' --><linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%"><!-- 分别设置三个不同位置的颜色 --><stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /><stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /></linearGradient></defs><rect width="200" height="200" fill="url(#grad3)" />
</svg>

在这里插入图片描述

示例 4: 不透明度渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 创建一个带有不透明度变化的线性渐变，id为'grad4' --><linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%"><!-- 颜色固定为黑色，但不透明度从完全透明到完全不透明变化 --><stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" /><stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /></linearGradient></defs><rect width="200" height="200" fill="url(#grad4)" />
</svg>

在这里插入图片描述

每个示例都展示了如何在SVG中创建和应用线性渐变。通过调整x1, y1, x2, 和 y2属性，可以改变渐变的方向；通过添加更多的<stop>元素，可以增加更多颜色或调整颜色过渡的位置；最后，通过修改stop-opacity属性，可以控制颜色的不透明度。

SVG___354">SVG 渐变- 放射性

当然可以，下面是4个使用SVG定义放射性渐变（径向渐变）的HTML5示例。每个例子都会包含详细的注释来帮助理解代码。

示例 1: 基本放射性渐变

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><!-- 定义一个放射性渐变 --><radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><!-- 属性解释：cx, cy: 渐变圆心的坐标，这里设置为画布的中心(50%, 50%)。r: 渐变圆的半径，设置为画布宽度或高度的一半(50%)。fx, fy: 渐变焦点的位置，通常与圆心相同，但也可以不同以创建偏移效果。--><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></radialGradient></defs><circle cx="100" cy="100" r="90" fill="url(#grad1)" />
</svg>

在这里插入图片描述

示例 2: 不同圆心和焦点的放射性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- <defs>元素用于定义可以在SVG中重用的对象，如渐变、模式或滤镜。这些对象不会直接渲染到画布上 --><defs><!-- 定义一个带有不同圆心和焦点位置的放射性（径向）渐变，并给它一个唯一的ID（grad2），以便在后续引用 --><radialGradient id="grad2" cx="70%" cy="30%" r="70%" fx="30%" fy="70%"><!-- 属性解释：cx, cy: 渐变圆心的坐标，这里设置为(70%, 30%)，表示圆心位于画布宽度的70%处和高度的30%处。r: 渐变圆的半径，设置为画布宽度或高度的70%，即从圆心到边界的距离。fx, fy: 渐变焦点的位置，不同于圆心，设置为(30%, 70%)，这将创建一个偏移效果，使渐变看起来像是从不同的点扩散出来。--><!-- 定义渐变的颜色停止点（stop）。颜色从蓝色逐渐过渡到绿色 --><!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为蓝色（rgb(0,0,255)），不透明度为1（完全不透明） --><stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" /><!-- 第二个颜色停止点位于渐变的结束位置（offset="100%"），颜色为绿色（rgb(0,255,0)），不透明度同样为1 --><stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" /></radialGradient></defs><!-- 在SVG画布上绘制一个椭圆形，并使用之前定义的放射性渐变填充 --><!-- 属性解释：cx, cy: 椭圆中心的坐标，这里设置为(100, 100)，即画布的中心位置。rx, ry: 分别设置椭圆的水平半径和垂直半径，这里设置为90和60，使得椭圆更扁平。fill: 使用url()函数引用之前定义的渐变（grad2），作为椭圆的填充样式。--><ellipse cx="100" cy="100" rx="90" ry="60" fill="url(#grad2)" />
</svg>

在这里插入图片描述

示例 3: 使用多个颜色停止点的放射性渐变

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- <defs>元素用于定义可以在SVG中重用的对象，例如渐变、图案或滤镜。这些对象不会直接渲染到画布上 --><defs><!-- 定义一个放射性（径向）渐变，并给它一个唯一的ID（grad3），以便在后续引用 --><radialGradient id="grad3" cx="50%" cy="50%" r="50%"><!-- 属性解释：cx, cy: 渐变圆心的坐标，这里设置为(50%, 50%)，表示圆心位于画布的中心。r: 渐变圆的半径，设置为50%，即从圆心到边界的距离为画布宽度或高度的一半。--><!-- 定义三个颜色停止点（stop），形成从红色到绿色再到蓝色的多色渐变 --><!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） --><stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /><!-- 第二个颜色停止点位于渐变的中间位置（offset="50%"），颜色为绿色（rgb(0,255,0)），不透明度同样为1 --><stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" /><!-- 第三个颜色停止点位于渐变的结束位置（offset="100%"），颜色为蓝色（rgb(0,0,255)），不透明度为1 --><stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /></radialGradient></defs><!-- 在SVG画布上绘制一个矩形，并使用之前定义的放射性渐变填充 --><!-- 属性解释：x, y: 矩形左上角的坐标，这里设置为(10, 10)，即矩形从距离画布左边界和上边界各10个单位的地方开始。width, height: 分别设置矩形的宽度和高度，这里设置为180个单位，使得矩形内部留有10个单位的空白边距。fill: 使用url()函数引用之前定义的渐变（grad3），作为矩形的填充样式。--><rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</svg>

在这里插入图片描述

示例 4: 渐变不透明度变化

<!-- 创建一个200x200像素的SVG画布 -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- <defs>元素用于定义可以在SVG中重用的对象，例如渐变、图案或滤镜。这些对象不会直接渲染到画布上 --><defs><!-- 定义一个放射性（径向）渐变，并给它一个唯一的ID（grad4），以便在后续引用 --><radialGradient id="grad4" cx="50%" cy="50%" r="50%"><!-- 属性解释：cx, cy: 渐变圆心的坐标，这里设置为(50%, 50%)，表示圆心位于画布的中心。r: 渐变圆的半径，设置为50%，即从圆心到边界的距离为画布宽度或高度的一半。--><!-- 定义两个颜色停止点（stop），形成一个从完全不透明到完全透明的红色渐变 --><!-- 第一个颜色停止点位于渐变的起始位置（offset="0%"），颜色为红色（rgb(255,0,0)），不透明度为1（完全不透明） --><stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /><!-- 注意：第二个颜色停止点的颜色与第一个相同，但是不透明度设置为0（完全透明） --><!-- 这将创建一个效果，使得渐变从中心开始是实色的红色，然后逐渐变为透明 --><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" /></radialGradient></defs><!-- 在SVG画布上绘制一个圆形，并使用之前定义的放射性渐变填充 --><!-- 属性解释：cx, cy: 圆心的坐标，这里设置为(100, 100)，即圆心位于画布的中心。r: 圆的半径，设置为90个单位，这样圆会占据大部分画布空间但仍然保持一些边缘空间。fill: 使用url()函数引用之前定义的渐变（grad4），作为圆形的填充样式。--><circle cx="100" cy="100" r="90" fill="url(#grad4)" />
</svg>