SVG实现棋盘背景

时间：5年前阅读：5285

棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中，灰色的棋盘图案已经是用于表示透明色的事实标准。用css实现代码量不能算少，所以转到SVG方案可能是更好的选择。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
  <defs>
    <pattern id="pattern1" width=0.2 height=0.2 >
      <rect x="10" width="10" height="10"/>
      <rect y="10" width="10" height="10"/>
    </pattern>
  </defs>
   <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg>
	</body>
</html>

效果：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

SVG实现棋盘背景

网友评论