SVG

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

SVG或可缩放矢量图形非常方便，例如显示徽标，该徽标缩放或已设置动画时仍然保持清晰。SVG组件提供了更多的控制来对图像及其矢量部分设置样式和动画。它将图像作为内联SVG放入标记中，包括所有属性，例如id、类、宽度和高度，这样就可以很容易地使用CSS对它们设置样式。

用法

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

<img src="" 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>

NoteSVG将根据其笔划和填充颜色调整当前颜色。要阻止这种行为，请将.uk-preserve class 添加到SVG本身或SVG内部的元素中。

Note由于<img>元素的loading="lazy"属性，SVG 图像进入视口时将作为内联 SVG 注入。

笔划动画

有两种方法可以设置SVG的笔划动画。第一种方法是使用Animation 组件和 uk-svg="stroke-animation: true", ，第二种方法是使用Parallax 组件。

组件选项

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

Option	Value	Default	Description
`src`	String	`''`	SVG源文件URL。如果位置存在哈希值，，那么只显示具有给定ID的SVG的`<symbol>`。
`stroke-animation`	Boolean	`false`	使用SVG中的`stroke`属性设置所有元素的动画。

JavaScript

了解更多关于JavaScript 组件的内容。

初始化

UIkit.svg(element, options);

属性

svg

可以通过添加的SVG节点解析JavaScript Promise。

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

UIkit3.x文档