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

【问题标题】：Apply a gradient to a svg shape filled with a path将渐变应用于填充有路径的 svg 形状
【发布时间】：2020-11-29 04:26:03
【问题描述】：

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

这是my code：

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

结果是：

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

【问题讨论】：

你正在应用渐变两次：到你的模式模板元素和 <rect> 你正在掩蔽。这使您真正想要实现的目标变得模棱两可。请编辑您的问题以明确说明您希望最终结果的样子：每个对角线笔划是否应显示完整的渐变，或者渐变是否应跨越带有图案的完整矩形？
谢谢@ccprog，我已经完成了。你能帮帮我吗？
抱歉，我错过了您的编辑。

标签： svg gradient svg-pattern

【解决方案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>

其他一切都保持不变。

【讨论】：