如何在SVG中使用vw/vh单位实现polygon多边形响应式适配

核心结论 #

polygon 元素的 points 属性本身不支持直接填写vw、vh等CSS单位，该属性仅接受无单位的坐标数值，对应SVG当前的用户坐标系，所以你编写的带vw单位的代码会被判定为无效属性值，无法正常渲染。

替代实现方案 #

• 方案1（最推荐）：配合viewBox实现整体响应式
  你可以将polygon的points改为无单位坐标，外层SVG容器的宽高直接用vw/vh定义，同时设置匹配的viewBox属性，内部所有图形的坐标会自动跟随SVG整体尺寸缩放，达到和直接给points加vw单位完全一致的效果。
  适配你需求的代码示例：

  <svg width="10vw" height="10vw" viewBox="0 0 10 10" fill="red">
    <!-- 坐标数值对应viewBox内的坐标系，自动跟随SVG的10vw尺寸缩放 -->
    <polygon points="2,1 1,9 4,3 2,1"/>
  </svg>
  

• 方案2：使用CSS赋值points属性
  现代浏览器支持在CSS中给points属性赋值，你可以搭配CSS变量和calc直接使用vw单位定义每个点的坐标：
  代码示例：

  <svg fill="red">
    <style>
      polygon {
        --p1x: calc(2vw);
        --p1y: calc(1vw);
        --p2x: calc(1vw);
        --p2y: calc(9vw);
        --p3x: calc(4vw);
        --p3y: calc(3vw);
        points: var(--p1x) var(--p1y), var(--p2x) var(--p2y), var(--p3x) var(--p3y), var(--p1x) var(--p1y);
      }
    </style>
    <polygon />
  </svg>
  

• 方案3：JS动态计算坐标
  如果需要兼容低版本浏览器，可以监听窗口resize事件，获取视口尺寸换算出对应像素值后，动态赋值给polygon的points属性。

内容的提问来源于stack exchange，提问作者Артем WEB