SVG响应式布局求助：桌面端横竖状态切换失效

问题根源 #

SVG的viewBox、元素的width/height、tspan的x/y等属于SVG核心属性，并非CSS可直接控制的样式属性，所以全局CSS变量绑定这些属性时浏览器不会解析生效，导致布局异常。

方案1：用CSS Transform实现布局切换（推荐，无需修改SVG内部） #

通过容器布局控制+SVG旋转，避开修改SVG内部属性的问题，兼容性更好：

<div class="header-container">
  <svg class="title-svg" viewBox="0 0 400 60" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="400" height="60" fill="#eee" rx="4"/>
    <text x="20" y="38" font-size="28" font-weight="bold" fill="#333">
      <tspan>我的页面标题</tspan>
    </text>
  </svg>
</div>

<div class="page-content">
  <!-- 页面内容区域 -->
</div>

/* 基础布局 */
.header-container {
  position: relative;
  margin-bottom: 20px;
}

.title-svg {
  width: 100%;
  height: auto;
}

.page-content {
  padding: 0 20px;
}

/* 桌面端（≥900px）：垂直标题固定左侧 */
@media (min-width: 900px) {
  .header-container {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    width: 100vh; /* 旋转后宽度适配视口高度 */
    margin: 0;
  }

  .page-content {
    margin-left: 80px; /* 给左侧标题预留空间 */
  }
}

/* 移动端（<900px）：水平标题居上 */
@media (max-width: 899px) {
  .header-container {
    width: 100%;
  }
}

方案2：双SVG切换（精准控制SVG内部结构） #

如果必须保持SVG的原始垂直/水平结构，直接准备两个SVG，用媒体查询控制显示隐藏：

<!-- 垂直版SVG（桌面端显示） -->
<svg class="title-svg vertical" viewBox="0 0 60 400" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="60" height="400" fill="#eee" rx="4"/>
  <text x="30" y="20" font-size="28" font-weight="bold" fill="#333" text-anchor="middle" writing-mode="vertical-rl">
    <tspan>我的页面标题</tspan>
  </text>
</svg>

<!-- 水平版SVG（移动端显示） -->
<svg class="title-svg horizontal" viewBox="0 0 400 60" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="400" height="60" fill="#eee" rx="4"/>
  <text x="20" y="38" font-size="28" font-weight="bold" fill="#333">
    <tspan>我的页面标题</tspan>
  </text>
</svg>

<div class="page-content">
  <!-- 页面内容区域 -->
</div>

.title-svg {
  display: none;
  width: 100%;
  height: auto;
}

/* 桌面端显示垂直SVG */
@media (min-width: 900px) {
  .title-svg.vertical {
    display: block;
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 80vh;
  }
  .page-content {
    margin-left: 80px;
  }
}

/* 移动端显示水平SVG */
@media (max-width: 899px) {
  .title-svg.horizontal {
    display: block;
    margin-bottom: 20px;
  }
}

替代思路：用HTML文本+CSS实现（更轻量） #

如果SVG仅用于展示文本+背景，完全可以用HTML元素替代，避免SVG的属性限制：

<div class="page-title">我的页面标题</div>
<div class="page-content">
  <!-- 页面内容区域 -->
</div>

.page-title {
  background: #eee;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

@media (min-width: 900px) {
  .page-title {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    width: 100vh;
    margin: 0;
  }
  .page-content {
    margin-left: 80px;
  }
}

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