主页 / coding / 问题 / 79375193
Accepted
Franck Freiburger
Asked: 2025-01-22 00:35:56 +0800 CST

如何在转换 <g> 组时保持 SVG 渐变相对于屏幕固定？

  • 772

我有一个包含多个形状的 SVG 组，这些形状使用 定义的渐变<g fill="url(#myGradient)"...。我想对组应用变换（例如缩放、旋转、平移），但我需要渐变相对于屏幕（视口）保持固定。

目前，当我对组应用变换时，渐变也会受到影响，即使我使用了 gradientUnits="userSpaceOnUse"。如何确保渐变保持固定位置，不会随着变换后的组移动或旋转？

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>
  <g fill="url(#myGradient)" transform="translate(200, 200) rotate(0)">
    <rect x="0" y="0" width="300" height="80"></rect>
    <rect x="0" y="100" width="300" height="80"></rect>
  </g>
</svg>

带有rotate(0)-> 渐变的蓝色在右侧
带有rotate(90)-> 渐变的蓝色在底部

我应该做哪些调整来确保渐变相对于屏幕保持固定并且不会随着组而变换？

svg

1 个回答

  1. Best Answer

    将要使用渐变渲染的形状移动到<mask>元素中。将渐变应用到填充整个画布的矩形上，然后通过应用蒙版剪切出形状。

    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
    <mask id="shapes" fill="white">
      <g transform="translate(200, 200) rotate(90)">
        <rect x="0" y="0" width="300" height="80"></rect>
        <rect x="0" y="100" width="300" height="80"></rect>
      </g>
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="url(#myGradient)" mask="url(#shapes)">
  </rect>
</svg>

    • 1

相关问题