将渐变应用于填充有路径的 svg 形状

Question

我有一个用对角线图案填充的 svg 矩形，我想在其上应用渐变。所以渐变应该跨越带有图案的整个矩形，而不应该应用于每个图案项目。

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 [=10=] ${h / 2}, L ${w / 2} [=10=], 
  M [=10=] ${h}, L ${w} [=10=], 
  M ${w / 2} ${h}, L ${w} ${h / 2}`;
  return diagonal;
}


class App extends React.Component<{}> {
  public render() {
    return (
      <svg width={width + patternW} height={height + patternH}>
        <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="url(#grad)"
              stroke-width="1"
              stroke-linecap="square"
              shape-rendering="auto"
            />
          </pattern>

          <mask id="mask">
            <rect width={width} height={height} fill="url(#pat)" />
          </mask>
        </defs>

        <rect
          x={0}
          y={0}
          width={width}
          height={height}
          //fill="url(#pat)"
          //stroke="black"
          fill="url(#grad)"
          mask="url(#mask)"
        />
      </svg>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

结果是：

正如你所看到的，我快到了，我不明白为什么渐变如此苍白，为什么每个图案项目的底部都比顶部更透明。

Answer 1

您正在将渐变应用于单个图案模板。但是如果你想让渐变跨越整个图案区域，你只需要在那里。相反，将图案模板的描边颜色设置为 stroke="white"。如果它随后作为 luminance mask 应用，白色部分将显示底层颜色，而（透明黑色）背景将掩盖其他任何内容。

      <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>

其他一切保持不变。

将渐变应用于填充有路径的 svg 形状

Apply a gradient to a svg shape filled with a path

svg

gradient

svg-pattern