为何我的SVG仅偶尔响应？Chrome小视口裁切JSFiddle却正常？

我来帮你捋捋这个问题～你遇到的情况确实和视口处理以及不同环境的默认样式差异有关，咱们一步步拆解：

问题根源 #

你的SVG用了viewBox="0 0 1000 1000"来定义坐标系统，但：

• Chrome浏览器中，当SVG所在的容器（比如body）没有明确设置溢出规则时，默认会裁切超出视口范围的内容；
• JSFiddle的页面容器默认添加了overflow: auto这类样式，让SVG超出部分可以通过滚动查看，所以不会出现裁切；
• 另外，你的SVG没有设置width和height属性，不同环境对无尺寸SVG的默认渲染逻辑有差异，这也加剧了表现不一致。

解决办法 #

试试这几个方案，都能解决Chrome里的裁切问题：

1. 给SVG添加自适应样式（最推荐）

给SVG设置固定尺寸的同时，加上CSS让它自适应容器并保持比例：

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" style="max-width: 100%; height: auto;">
  <path d="M100 100 h800 v800 h-800 v-800" fill="black" stroke="red" stroke-width="8" style=" stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: dash 2s linear forwards infinite;" />
  <style>@keyframes dash { to { stroke-dashoffset: 0; } }</style>
  <text x="120" y="200" fill="skyblue" style="font-size:30;">
    1: We do not endorse 'Aarogya Setu App'.
    <tspan x="120" y="300"> 2: To use this App you have to share </tspan>
    <tspan x="120" y="400"> your Name, Age, Sex, Location, Job and </tspan>
    <tspan x="120" y="500"> other details with govt authorities. </tspan>
    <tspan x="120" y="600"> 3: Also these details are transferred to </tspan>
    <tspan x="120" y="700"> nearby devices, via bluetooth using an </tspan>
    <tspan x="120" y="800"> encryption model, use only if you trust </tspan>
    <tspan x="120" y="870"> your govt. </tspan>
  </text>
</svg>

2. 给父容器设置溢出规则

如果不想修改SVG本身，可以给它的父容器（比如页面的body）添加CSS：

body {
  overflow: auto;
}

这样当SVG内容超出视口时，页面会显示滚动条，不会直接裁切。

3. 调整preserveAspectRatio（按需选择）

如果希望SVG始终占满容器（允许变形），可以给SVG加上preserveAspectRatio="none"，这样SVG会拉伸适配容器，不会出现裁切，但内容比例会变化：

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%">
  <!-- 内容不变 -->
</svg>

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