SVG

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

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

用法

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

<img src="" uk-svg>

使用 uk-svg 属性还可以从SVG文件中插入符号。只需将符号的ID附加到图像路径即可，就像在任何URL片段中一样。

  • <!-- 目标对象SVG图像 -->
<img src="/images/svg/icons/cloud-download.svg" width="40" height="40" uk-svg>

<!-- 定位到SVG图像内的符号 -->
<img src="/images/icons.svg#trash" width="40" height="40" uk-svg>

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

内联SVG图像也可以使用 Image 组件的延迟加载效果。

笔划动画

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

组件选项

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

选项 可用值 默认值 描述
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'; })

上一篇： Subnav

下一篇： Switcher

svg.md

# SVG

<p class="uk-text-lead">将内联SVG图像插入到页面标记中，并使用CSS设置它们的样式。</p>

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



***

## Usage-用法

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

```html
<img src="" uk-svg>
```

使用 `uk-svg` 属性还可以从SVG文件中插入符号。只需将符号的ID附加到图像路径即可，就像在任何URL片段中一样。

```example
<!-- 目标对象SVG图像 -->
<img src="images/svg/icons/cloud-download.svg" width="40" height="40" uk-svg>

<!-- 定位到SVG图像内的符号 -->
<img src="images/icons.svg#trash" width="40" height="40" uk-svg>
```

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

内联SVG图像也可以使用 [Image 组件](image.md#inline-svg)的延迟加载效果。

***

## Stroke Animation-笔划动画

有两种方法可以设置SVG的笔划动画。第一种方法是使用 [Animation 组件](animation.md#svg-strokes) 和 `uk-svg="stroke-animation: true"`, 第二种方法是使用 [Parallax 组件](parallax.md#svg-strokes)。

***

## Component options-组件选项

下列选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项             | 可用值   | 默认值 | 描述                                                                    |
| :----------------- | :------ | :------ | :--------------------------------------------------------- |
| `src`              | String  | `''`    | SVG源文件URL。如果位置存在哈希值，，那么只显示具有给定ID的SVG的 `<symbol>` 。 |
| `stroke-animation` | Boolean | `false` | 使用SVG中的 `stroke` 属性设置所有元素的动画。  |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.svg(element, options);
```

### 属性

#### svg

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

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