在uniapp中使用svg绘制米字格完整可用的代码
时间: 2023-12-22 15:04:39 浏览: 95
在vue项目中优雅的使用SVG的方法实例详解
当然!以下是一个在UniApp中使用SVG绘制米字格的完整可用代码:
```html
<template>
<view class="container">
<svg class="grid" viewBox="0 0 100 100">
<!-- 绘制水平线 -->
<line x1="0" y1="50" x2="100" y2="50" stroke="#000" stroke-width="1" />
<!-- 绘制垂直线 -->
<line x1="50" y1="0" x2="50" y2="100" stroke="#000" stroke-width="1" />
</svg>
</view>
</template>
<style>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
width: 200px;
height: 200px;
}
</style>
```
在上面的代码中,我们使用了 `<svg>` 元素来创建一个可缩放矢量图形。通过设置 `viewBox` 属性,我们定义了SVG视口的坐标系。在这个案例中,我们将视口设置为 `(0, 0, 100, 100)`,表示SVG的宽度和高度都是100个单位。
然后,我们使用 `<line>` 元素绘制了水平线和垂直线,分别位于 `(0, 50)` 和 `(50, 0)` 这两个坐标点上。通过设置 `stroke` 属性来指定线条的颜色,`stroke-width` 属性来指定线条的宽度。
最后,我们使用了Flex布局将SVG图形居中显示在容器中。
希望这个代码能够帮助到你!如有任何疑问,请随时提问。
阅读全文