子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

SVG ​

1. SVG 标签 ​

SVG 属于 HTML5 中的图形标签。

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图像格式，用于在网页上呈现二维图形和图形应用程序。它允许三种类型的图形对象：矢量图形、栅格（raster）图像和文本。以下是关于 SVG 的一些详细信息：

  1. 矢量基础：由于 SVG 是矢量的，它可以无损地放大或缩小，这使其成为响应式网页设计的理想选择，因为它可以适应不同大小的屏幕和分辨率。
  2. 嵌入 HTML：SVG 代码可以直接写在 HTML 文件中，通常使用<svg>标签来定义一个 SVG 图形容器。在这个容器内部，可以使用各种 SVG 元素如<circle>、<rect>、<line>等来绘制形状。
  3. 样式化：SVG 元素可以像 HTML 元素一样被 CSS 样式化。这意味着你可以应用颜色、渐变、边框等 CSS 属性来美化你的 SVG 图形。
  4. 交互性：SVG 图形还可以添加交互性，例如鼠标悬停效果、动画等，使它们变得更加生动和吸引用户的注意力。
  5. 兼容性：大多数现代浏览器都支持 SVG，这使得它在 Web 开发中非常流行。
  6. 替代方案：尽管 SVG 主要用于二维图形，但也可以通过某些技巧模拟三维效果，或者与 WebGL 等技术结合使用以创建更复杂的三维视觉体验。
  7. 优势：SVG 的优势在于它的可扩展性和清晰度，特别是在需要高分辨率或可伸缩的图形时，比如地图、图表和图标等。
  8. 缺点：然而，对于复杂的图像和照片，使用位图格式如 JPEG 或 PNG 可能更合适，因为 SVG 文件可能会变得相当大。

综上所述，SVG 是 HTML5 的一部分，它提供了一种强大而灵活的方式来在网页上创建和展示矢量图形。

2. svg 实战 ​

2.1. 案例 - svg 作为 css 路劲裁剪 ​

  1. 如下一段文字
你好，测试svg的路径裁剪1
你好，测试svg的路径裁剪2
你好，测试svg的路径裁剪3
你好，测试svg的路径裁剪4
  1. 给这段文字添加 svg 作为 css 路劲裁剪
你好，测试svg的路径裁剪1
你好，测试svg的路径裁剪2
你好，测试svg的路径裁剪3
你好，测试svg的路径裁剪4
  1. 代码实现
html
<section>
  <div
    style="background-color: var(--vp-c-border);height: 100px;clip-path: url(#clipping-path-1);"
  >
    <div>你好，测试svg的路径裁剪1</div>
    <div>你好，测试svg的路径裁剪2</div>
    <div>你好，测试svg的路径裁剪3</div>
    <div>你好，测试svg的路径裁剪4</div>
  </div>
  <svg height="0">
    <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
      <circle cx="0.25" cy="0.25" r="0.25" />
      <circle cx="0.76" cy="0.25" r="0.25" />
      <rect x="0" y="0.5" width="0.5" height="0.5" />
      <rect x="0.51" y="0.5" width="0.5" height="0.5" />
    </clipPath>
  </svg>
</section>

2.2. 案例 - svg 动画 ​

  1. 在一个 rect 中添加一个 svg 动画
  1. 代码实现
html
<section>
  <svg width="200" height="100">
    <rect x="0" y="0" width="300" height="100" fill="var(--vp-c-border)" />
    <circle cx="0" cy="50" r="15" fill="pink">
      <animate
        attributeName="cx"
        from="0"
        to="200"
        dur="2s"
        repeatCount="indefinite"
      />
    </circle>
  </svg>
</section>

3. 参考 ​

[mdn 参考地址](mdn 参考地址 https://developer.mozilla.org/zh-CN/docs/Web/SVG)