地图上地形的图标需要用svg实现，因此学习了下svg线性图标绘制

效果

svg代码

实线

svg
<svg width="18" style="transform: rotate(90deg)" height="18" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#b3fe68" stroke-width="2"/>
  <line x1="3" y1="3" x2="15" y2="15" stroke="#b3fe68" stroke-width="2" />
  <line x1="1" y1="9" x2="15" y2="24" stroke="#b3fe68" stroke-width="2" />
  <line x1="9" y1="1" x2="24" y2="15" stroke="#b3fe68" stroke-width="2" />
</svg>

反斜线

svg
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#219a1a" stroke-width="2"/>
  <line x1="3" y1="3" x2="15" y2="15" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
  <line x1="1" y1="9" x2="15" y2="24" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
  <line x1="9" y1="1" x2="24" y2="15" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
</svg>

无规则三角形

svg
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  <!-- 绿色正方形边框 -->
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#219a1a" stroke-width="2"/>
  <!-- 正斜虚线 -->
  <!-- 更大的绿色三角形，角度不规律 -->
  <!-- 1号三角形，正常朝上 -->
  <polygon points="3,13 9,13 6,5" fill="#219a1a"/>
  <!-- 2号三角形，逆时针旋转30度 -->
  <polygon points="13,3 17,9 9,11" fill="#219a1a"/>
  <!-- 3号三角形，顺时针旋转45度 -->
  <polygon points="4,17 12,15 8,17" fill="#219a1a"/>
</svg>