SVG

将内联 SVG 图片注入页面标记，并用 CSS 为其设置样式。

可缩放矢量图形（SVG）非常实用，例如用于展示在缩放时依然清晰、或是带动画的 logo。SVG 组件可以更精细地控制图片及其矢量部分的样式与动画。它会把图片作为内联 SVG 注入标记中，并带上 ID、类、宽度和高度等全部属性，因此可以很方便地用 CSS 选中它们。

用法

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

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

使用 uk-svg 属性还可以注入 SVG 文件中的某个 symbol。只需像处理任何带片段的地址那样，把 symbol 的 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 的描边和填充颜色会采用当前颜色。要阻止该行为，请为 SVG 本身或 SVG 内部的元素添加 .uk-preserve 类。

注意 <img> 元素的 loading="lazy" 属性会被考虑在内，SVG 图片会在进入视口时以行内 SVG 的形式注入。

描边动画

为 SVG 描边添加动画有两种方式。第一种使用 Animation 组件 和 uk-svg="stroke-animation: true"，第二种使用 Parallax 组件。

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

JavaScript

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

初始化

UIkit.svg(element, options);

属性

svg

一个 JavaScript Promise，它会在注入的 SVG 节点就绪后解决。

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