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内部的元素中。
内联SVG图像也可以使用Image 组件的延迟加载效果。
笔划动画
有两种方法可以设置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'; })