如何在Phalcon的.volt模板中动态修改SVG数值适配移动端

当然可以通过整合JavaScript到Volt模板中实现动态修改固定值，具体实现方式如下：

• 基础实现步骤

  1. 在Volt模板中编写SVG结构时，给需要调整的线条元素添加唯一ID，方便JS定位：

  <svg width="100%" height="20">
    <!-- 基准水平线 -->
    <line id="baseLine" x1="0" y1="10" x2="30" y2="10" stroke="#ccc" stroke-width="2"/>
    <!-- 基于数据的水平线 -->
    <line id="dataLine" x1="0" y1="10" x2="{{ predictability * 30 / 100 }}" y2="10" stroke="#2ecc71" stroke-width="2"/>
  </svg>
  

  2. 在模板中嵌入JS代码，检测屏幕尺寸并动态修改线条属性：

  <script>
    // 检测屏幕宽度，定义移动端阈值（可根据需求调整）
    const isMobile = window.innerWidth < 768;
    // 动态设置基准长度
    const baseLength = isMobile ? 20 : 30;
    // 从Volt模板获取predictability值
    const predictability = {{ predictability }};
    // 计算数据线条的长度
    const dataLength = predictability * baseLength / 100;
  
    // 更新SVG线条的x2属性
    document.getElementById('baseLine').setAttribute('x2', baseLength);
    document.getElementById('dataLine').setAttribute('x2', dataLength);
  </script>
  

• 优化：支持窗口尺寸变化
  如果需要在用户调整窗口大小时自动适配，可以添加监听事件：

  <script>
    function updateLineLengths() {
      const isMobile = window.innerWidth < 768;
      const baseLength = isMobile ? 20 : 30;
      const predictability = {{ predictability }};
      const dataLength = predictability * baseLength / 100;
  
      document.getElementById('baseLine').setAttribute('x2', baseLength);
      document.getElementById('dataLine').setAttribute('x2', dataLength);
    }
  
    // 页面加载时初始化
    window.addEventListener('load', updateLineLengths);
    // 窗口大小变化时重新计算
    window.addEventListener('resize', updateLineLengths);
  </script>
  

这种方式利用前端JS获取客户端屏幕尺寸，完美弥补了PHP无法实时检测客户端环境的短板，实现SVG线条在不同设备上的适配显示。

内容的提问来源于stack exchange，提问作者michaela šatarova