CSS offset-path属性的媒体查询在移动端不生效问题求助

问题描述 #

我为offset-path设置的CSS媒体查询在max-width: 480px的移动端设备上无法生效。桌面端1280px720px分辨率下运行完全正常，但在280px150px的移动端视图中，移动元素会脱离当前视口下的offset-path路径，依旧沿用桌面端分辨率对应的offset-path持续移动。我不清楚故障原因，请问是否有遗漏的配置点？

以下是代码片段：

CSS代码

body {
overflow: hidden;
}
.obj {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  offset-rotate: auto 30deg;
  offset-path: path('m60.72977,154.26244c0,0 41.05513,-142.64096 228.95326,-126.12023c170.42622,14.98454 119.16333,457.14878 290.30674,454.03282c164.91069,-3.00249 252.53349,-444.03609 302.27815,-435.81545');
  animation: move 10s infinite linear;
  }
.path {
position: absolute;
width: 980px;
height: 500px;
}
.map {
position: absolute;
top: 0px;
left: 0px;
}
 @keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .container, body, .map, .path {
    max-width: 280px;
    height: auto;
    }
  .path {
    max-width: 280px;
    height: 150;
    }
  .obj {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0px;
  top: 0px;
  }
  }

HTML代码

<svg class="path" width="980" height="500" viewBox="0 0 980 500" data-name="Layer 1" version="1.1">
 <g>
  <title>Layer 1</title>
  <metadata id="svg_34">image/svg+xml</metadata>
  <metadata id="svg_117">image/svg+xml</metadata>
  <metadata id="svg_132">image/svg+xml</metadata>
  <g id="svg_134">
   <path d="m60.72977,154.26244c0,0 41.05513,-142.64096 228.95326,-126.12023c170.42622,14.98454 119.16333,457.14878 290.30674,454.03282c164.91069,-3.00249 252.53349,-444.03609 302.27815,-435.81545" id="svg_130" stroke-width="1px" stroke="#000000" fill="none"/>
  </g>
 </g>

</svg>

<svg class="obj" xmlns="http://www.w3.org/2000/svg" width="37" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M18 .5v6.1364" stroke-linecap="square"/><path fill="#cff" d="M15.0303 8.0717h5.9394v4.0191h-5.9394z"/><path d="M23.5152 3.3637h0c0 3.3465-2.3636 5.8565-5.5152 5.8565s-5.5151-2.51-5.5151-5.8565h0zm-1.697 6.7177v7.0844c0 3.3339-1.6364 5.8343-3.8182 5.8343s-3.8182-2.5004-3.8182-5.8343v-7.0844z" fill="#ffc"/><path fill="#000" stroke="#262626" d="M11.6364 12.0909h12.7273v2.2967H11.6364z"/><path fill="#cff" d="M.5 9.7045h11.1364v8.1818H.5z"/><g fill="none"><path d="M.5 11.75h11.1364M.5 13.7954h11.1364M.5 15.8409h11.1364"/><path d="M2.8864 9.7045v8.1818m3.1818-8.1818v8.1818M9.25 9.7045v8.1818"/></g><path fill="#cff" d="M24.3636 9.7045H35.5v8.1818H24.3636z"/><g fill="none"><path d="M24.3636 11.75H35.5m-11.1364 2.0454H35.5m-11.1364 2.0455H35.5"/><path d="M26.75 9.7045v8.1818m3.1818-8.1818v8.1818m3.1818-8.1818v8.1818"/></g></svg>
  </div>
</body>
</html>

问题根因 #

• CSS里硬编码的offset-path路径是基于桌面端980px宽度的绝对像素值，和你写在SVG里的路径是完全独立的两份数据，不会跟着SVG容器的缩放自动适配，你在媒体查询里只改了容器尺寸，没更新路径坐标，自然会出现元素沿大尺寸路径移动超出视口的问题。
• 媒体查询里.path的height:150没加px单位，样式不会生效。

修复方案 #

直接让CSS的offset-path引用SVG内部的路径元素，路径会自动跟随SVG的缩放适配，不需要维护两份路径数据，也不用在媒体查询里重复写路径：

1. 给SVG内部的path元素加id="motion-path"
2. 把CSS里的offset-path: path('xxx')改成offset-path: url(#motion-path)
3. 补全媒体查询里height的px单位即可。

修改后的核心代码 #

调整后的CSS

body {
overflow: hidden;
}
.obj {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  offset-rotate: auto 30deg;
  /* 直接引用SVG内部路径，自动适配缩放 */
  offset-path: url(#motion-path);
  animation: move 10s infinite linear;
}
.path {
  position: absolute;
  width: 980px;
  height: 500px;
}
.map {
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@media only screen and (max-width: 600px) {
  .container, body, .map, .path {
    max-width: 280px;
    height: auto;
  }
  .path {
    max-width: 280px;
    /* 补全单位 */
    height: 150px;
  }
  .obj {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
  }
}

调整后的SVG路径标签

<!-- 新增id供CSS引用 -->
<path d="m60.72977,154.26244c0,0 41.05513,-142.64096 228.95326,-126.12023c170.42622,14.98454 119.16333,457.14878 290.30674,454.03282c164.91069,-3.00249 252.53349,-444.03609 302.27815,-435.81545" id="motion-path" stroke-width="1px" stroke="#000000" fill="none"/>

内容的提问来源于stack exchange，提问作者Chandan