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>

是否可以在某个绝对位置上启动/停止SVG渐变？

1 个答案: