SVG

将内联 SVG 图像注入到页面标记中，并使用 CSS 设置样式。

SVG 或可缩放矢量图形非常方便，例如显示缩放时保持清晰或可动画的徽标。SVG 组件提供更多控制来设置图像及其矢量部分的样式和动画。它将图像作为内联 SVG 注入到标记中，包括所有属性，如 ID、类、宽度和高度，以便可以使用 CSS 轻松定位它们。

用法

要应用此组件，请将 uk-svg 属性添加到 <img> 元素。

<img src="" width="" height="" uk-svg>

使用 uk-svg 属性还允许您从 SVG 文件中注入一个符号。只需将符号的 ID 追加到图像路径，就像在任何片段 URL 中一样。

• 预览
• 标记

<!-- 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"，其次是使用视差组件。

组件选项

可以将这些选项中的任何一个应用于组件属性。用分号分隔多个选项。了解更多

JavaScript

了解更多关于JavaScript 组件的信息。

初始化

UIkit.svg(element, options);

属性

svg

一个 JavaScript Promise，它将使用添加的 SVG 节点解析。

UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })