为带斜线图案的SVG矩形应用全局渐变的异常问题排查

你这个思路其实已经摸到门道了，但问题出在SVG mask的工作原理上——SVG的遮罩是根据内容的亮度来控制透明度的：白色区域会完全显示下层内容，黑色会完全隐藏，中间的灰度就对应半透明。你原来的mask里，斜线用了渐变描边（红到蓝），红色亮度高，所以遮罩对应区域的不透明度高，蓝色亮度低，不透明度就低，这就导致底部的斜线看起来更透明，而且整个渐变因为经过了非纯白的遮罩过滤，显得暗淡。

正确的实现方式 #

我们需要把图案做成纯纯色的遮罩（比如白色斜线，其他区域透明），然后让填充了全局渐变的矩形通过这个遮罩显示，这样渐变是覆盖整个矩形的，图案只是用来“镂空”出渐变的显示区域。

修改后的代码如下：

import * as React from "react"; 
import { render } from "react-dom"; 

const width = 300; 
const height = 400; 
const patternW = 24; 
const patternH = 24; 

function createPatternPath(w: number, h: number) { 
  const diagonal = `M ${0} ${h / 2}, L ${w / 2} ${0}, M ${0} ${h}, L ${w} ${0}, M ${w / 2} ${h}, L ${w} ${h / 2}`; 
  return diagonal; 
} 

class App extends React.Component<{}> { 
  public render() { 
    return ( 
      <svg width={width} height={height}> 
        <defs> 
          <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> 
            <stop offset="0%" stop-color="red"></stop> 
            <stop offset="100%" stop-color="blue"></stop> 
          </linearGradient> 
          {/* 改成纯白色的斜线图案，作为遮罩用 */}
          <pattern id="pat" width={patternW} height={patternH} patternUnits="userSpaceOnUse" > 
            <path d={createPatternPath(patternW, patternH)} 
                  fill="transparent" 
                  stroke="white" 
                  stroke-width="1" 
                  stroke-linecap="square" 
                  shape-rendering="auto" /> 
          </pattern> 
          <mask id="mask"> 
            {/* mask里的矩形用图案填充，这样斜线是白色（不透明），背景透明 */}
            <rect width={width} height={height} fill="url(#pat)" /> 
          </mask> 
        </defs> 
        {/* 矩形填充全局渐变，用mask只显示斜线区域 */}
        <rect x={0} y={0} width={width} height={height} 
              fill="url(#grad)" 
              mask="url(#mask)" /> 
      </svg> 
    ); 
  } 
} 

const rootElement = document.getElementById("root"); 
render(<App />, rootElement);

关键修改点说明 #

• Pattern的描边颜色改为白色：这样mask里的斜线区域是纯白（完全不透明），其他区域是透明，保证遮罩的边缘清晰，不会出现半透明的情况。
• 去掉SVG多余的宽高：原来的width={width + patternW}会让SVG多出图案的尺寸，现在直接用width={width}和height={height}即可。
• mask的作用逻辑调整：现在mask只负责定义哪些区域显示渐变，渐变本身是直接应用在整个矩形上的，所以渐变会完整覆盖整个矩形，透过斜线图案显示出来，完美实现你要的效果。

这样修改后，你就能看到红色到蓝色的渐变完整覆盖整个矩形，斜线清晰显示渐变的色彩，不会出现暗淡和局部透明的问题了。

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