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

SVG 模糊效果

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

示例1：基本模糊效果

html 复制代码

<!-- 创建一个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：不同方向的模糊

html 复制代码

<!-- 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：多重模糊效果

html 复制代码

<!-- 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：模糊与颜色混合

html 复制代码

<!-- 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 阴影

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

示例1：基本阴影效果

html 复制代码

<!-- 创建一个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：彩色阴影

html 复制代码

<!-- 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：多重阴影效果

html 复制代码

<!-- 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：内阴影效果

html 复制代码

<!-- 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 渐变 - 线性

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

示例 1: 基本线性渐变

html 复制代码

<!-- 创建一个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: 竖直方向渐变

html 复制代码

<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: 多色渐变

html 复制代码

<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: 不透明度渐变

html 复制代码

<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 渐变- 放射性

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

示例 1: 基本放射性渐变

html 复制代码

<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: 不同圆心和焦点的放射性渐变

html 复制代码

<!-- 创建一个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: 使用多个颜色停止点的放射性渐变

html 复制代码

<!-- 创建一个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: 渐变不透明度变化

html 复制代码

<!-- 创建一个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>

以上四个示例展示了如何在SVG中使用<radialGradient>元素创建不同的放射性渐变效果。每个示例都包括了对关键属性的解释，并且通过不同的形状（圆形、椭圆形、矩形）应用这些渐变，以展示它们的视觉效果。希望这些示例能够满足你的需求。