是否可以在某个绝对位置 start/stop SVG 渐变？

Question

我正在 Javascript 不同的 L 形路径中创建。它们的长度和位置不同。我想要一个 linearGradient 作为它们的笔触，其中第一个停止偏移位于 x=10 像素的位置，即颜色的变化总是在 x 像素之后开始。

使用渐变的标准方式仅提供相对定位（例如，对象边界框）。由于不同的对象边界框，这会导致不同的停止偏移。

这是一个示例：

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }

<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
  <path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient>
    </defs>
  
</svg>

有没有一种方法可以使用一个渐变，但可以通过 SVG 嵌套或 javascript 巧妙地引用它？

Answer 1

使用gradientUnits="userSpaceOnUse"。这样，渐变以绝对单位定位，但始终位于定义它的元素的 局部坐标系 中。

在你的例子中，所有路径都在同一个坐标系中意味着你定义了一个跨越所有路径的整体渐变。为避免这种情况，您必须更改它，例如通过定义 transform 属性。每条连续的路径都向右移动更多，而其在 局部坐标系 中测量的起点保持在同一位置。

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }

<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M10 10 V 100 H 60 " stroke="url(#cl1)" transform="translate(140)"/>
  <path class="p1" d="M10 10 V 100 H 160 " stroke="url(#cl1)" transform="translate(240)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="110" y2="0">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient>
    </defs>
  
</svg>

是否可以在某个绝对位置 start/stop SVG 渐变？

Is it possible to start/stop SVG gradients at a certain absolute position?

javascript

svg

gradient