用svg 实现动态斜纹背景的核心是采用 patternunits="objectboundingbox" 配合小数坐标（如宽高0.1、线坐标0–1），再通过 transform="rotate()" 控制角度、css变量注入颜色，确保响应式缩放与动态可控。
在 H5 页面中，用 SVG 的 <pattern></pattern> 实现动态斜纹背景，核心是定义一个斜线图案单元（<pattern></pattern>），再用它填充目标图形或区域。关键在于让“斜纹”能随容器缩放、响应式变化，甚至支持 CSS 控制（如颜色、密度、角度）。
1. 基础 pattern 斜纹定义（固定单位）
先写一个最简可用的 SVG 斜纹 pattern：用 <line></line> 在 10×10 的 pattern 单元内画一条从左下到右上的斜线，然后重复平铺。
<svg width="0" height="0"><defs><pattern id="diagonal-stripe" patternunits="userSpaceOnUse" width="10" height="10"><line x1="0" y1="10" x2="10" y2="0" stroke="#999" stroke-width="2"></line></pattern></defs></svg>
注意：patternUnits="userSpaceOnUse" 表示单位尺寸按实际像素计算，方便控制疏密；width/height=10 决定条纹间距，越小越密。
2. 让斜纹适配任意容器（响应式关键）
直接用固定宽高会失真。推荐两种可靠方式：
-
用
objectBoundingBox+ 百分比坐标：让 pattern 相对于被填充元素自身尺寸缩放patternUnits="objectBoundingBox"，并把width和height设为0.1（即 10% 宽高），<line></line>坐标用0–1小数（如x1="0" y1="1" x2="1" y2="0"）。这样无论容器多大，斜纹密度始终一致。 -
用 CSS 自定义属性联动：在
<pattern></pattern>外层 SVG 上设style="--stripe-color: #666; --stripe-gap: 12;"，再用 JS 动态生成 pattern 或用 CSS 变量注入（需配合<use></use>或内联 style 替换）。
3. 支持动态角度与颜色（CSS + JS 联动）
纯 SVG pattern 不支持 CSS 变量直接作用于 <line></line> 属性，但可通过以下方式实现动态控制：
- 用
<g transform="rotate(45)"></g>包裹<line></line>，旋转整个图案单元——角度可由 JS 修改transform值； - 将
<pattern></pattern>写成内联 SVG（非外部引用），再用 JS 获取并修改line.stroke或line.strokeWidth； - 更现代的做法：用
CSS mask-image配合conic-gradient或repeating-linear-gradient模拟斜纹（不依赖 SVG），但兼容性略低（Chrome/Firefox 支持好，Safari 需测试）。
4. 实际使用示例（HTML 中嵌入）
把 pattern 定义放在页面顶部不可见 SVG 中，再用 fill="url(#diagonal-stripe)" 应用：
<!-- 隐藏的 pattern 定义 -->
<svg aria-hidden="true" width="0" height="0"><defs><pattern id="bg-stripe" patternunits="objectBoundingBox" width="0.1" height="0.1"><g transform="rotate(30)"><line x1="0" y1="1" x2="1" y2="0" stroke="var(--stripe-color, #ccc)" stroke-width="0.03"></line></g></pattern></defs></svg><p><!-- 使用 -->
</p><div style="
width: 300px; height: 200px;
background: url('data:image/svg+xml;utf8,<svg xmlns=" href="https://www.php.cn/link/279e15ba1f35e19bb1ca79a85a6d0a85">https://www.php.cn/link/279e15ba1f35e19bb1ca79a85a6d0a85; width="10" height="10"><rect width="10" height="10" fill="url(%23bg-stripe)"></rect>');
--stripe-color: #4a90e2;
"></div>
注：上面用了 data URL 方式避免外链，也支持 CSS 变量（需确保 SVG 内联且浏览器支持）。
不复杂但容易忽略：pattern 的坐标系、单位模式、以及是否随父容器缩放，这三点决定动态效果成败。优先用 objectBoundingBox + 小数坐标，再配合 transform 旋转和 CSS 变量注入，就能稳定实现可控的动态斜纹背景。
