svg 绘制旗帜

效果：

 

const drawFlag = () => {
  const viewBox = 1024;

  const poleHeight = 1000;
  const poleWidth = 60;
  const poleX = 10;
  const poleY = 10;


  const x = poleX + poleWidth;
  const y = poleY + poleWidth;
  const width = 800;
  const height = 600;
  const radian = 90;

  return `<svg viewBox="0 0 ${viewBox} ${viewBox}" width="50" height="50" style="margin: auto 100px">
            <rect x="${poleX}" y="${poleY}" width="${poleWidth}" height="${poleHeight}" stroke="#000" />
            <path d="M ${x} ${y} Q ${width/4} ${y -radian}, ${width/2} ${y} Q ${width/4*3} ${y+radian}, ${width} ${y} L ${width} ${height} Q ${width/4*3} ${height+radian}, ${width/2} ${height} Q ${width/4} ${height-radian}, ${x} ${height} Z" stroke="#000"  />
          </svg>`;
}