SVG
将内联 SVG 图片注入页面标记并使用 CSS 样式化它们。
SVG 或可缩放矢量图形非常方便，例如用于显示在缩放时保持清晰度或进行动画的徽标。SVG 组件提供更多控制来样式化和动画化图像及其矢量部分。它将图像作为内联 SVG 注入标记，包括所有属性，如 ID、类、宽度和高度，以便可以使用 CSS 轻松地进行定位。
用法
要应用此组件，请将 uk-svg 属性添加到 <img> 元素。
<img src="" width="" height="" uk-svg>使用 uk-svg 属性还可以从 SVG 文件中注入符号。只需像在任何分段 URL 中一样将符号的 ID 附加到图像路径。
-
<!-- Targets the SVG image --> <img src="../assets/uikit/src/images/icons/cloud-download.svg" width="40" height="40" uk-svg> <!-- Targets a symbol inside the SVG image --> <img src="../assets/uikit/tests/images/icons.svg#cloud-upload" width="40" height="40" uk-svg>
注意 SVG 将调整当前颜色以用于其描边和填充颜色。要防止此行为，请将 .uk-preserve 类添加到 SVG 本身或 SVG 内部的元素。
注意 <img> 元素的 loading="lazy" 属性将被考虑在内，并且 SVG 图片将在它们进入视口时被注入为内联 SVG。
描边动画
有两种方法可以动画化 SVG 描边。首先使用 动画组件 和 uk-svg="stroke-animation: true"，其次使用 视差组件.
组件选项
任何这些选项都可以应用于组件属性。使用分号分隔多个选项。 了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
src |
字符串 | SVG 源 URL。如果存在位置哈希，则只显示具有给定 ID 的 SVG 的 <symbol>。 |
|
stroke-animation |
布尔值 | false |
动画化 SVG 中所有具有 stroke 属性的元素。 |
JavaScript
了解更多关于 JavaScript 组件.
初始化
UIkit.svg(element, options);属性
svg
一个 JavaScript Promise，它将解析为添加的 SVG 节点。
UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })