在微信小程序中使用svg绘制米字格完整可用的代码
时间: 2024-04-20 17:24:33 浏览: 223
在微信小程序中使用SVG绘制米字格的代码相对于UniApp略有不同。以下是一个在微信小程序中使用SVG绘制米字格的完整可用代码:
<view class="container">
<svg class="grid" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- 绘制水平线 -->
<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>
在上面的代码中,我们仍然使用了 <svg>
元素来创建一个可缩放矢量图形。通过设置 viewBox
属性,我们定义了SVG视口的坐标系。在这个案例中,我们将视口设置为 (0, 0, 100, 100)
,表示SVG的宽度和高度都是100个单位。
在微信小程序中,需要添加 xmlns="http://www.w3.org/2000/svg"
属性来指定SVG命名空间。
然后,我们使用 <line>
元素绘制了水平线和垂直线,分别位于 (0, 50)
和 (50, 0)
这两个坐标点上。通过设置 stroke
属性来指定线条的颜色,stroke-width
属性来指定线条的宽度。
最后,我们将SVG图形放置在一个 <view>
元素中,通过CSS样式进行布局。
希望这个代码能够帮助到您!如有任何疑问,请随时提问。
相关推荐

















