在SVG路径的描边处使用图像是否可行？

Question

首先，我知道这个问题与这个问题非常相似，但我尝试使用SVGPATH实现该解决方案，但没有成功。

我也知道另一个解决方案是循环PATH并设置PATH的FILL，如此处和其他网站上所述。

然而，我已经动画化了STROKE-DASHOFFSET的PATH，使得PATH的描边，即一个不规则的线条，看起来像是被绘制到页面上；这就是我想要实现的效果，而不是使用颜色作为STROKE，而是使用图像。换句话说，对于用户来说，它将显示为图像（而不是纯色）作为不规则线条被绘制到页面上。

按照要求，以下是我正在使用的PATH的HTML及其相应的CSS，该PATH的图像以及动画本身的CSS：

        <div id="container">
           <svg>
              <path d="
                 M0,5
                 L184,5
                 C202,5 202,5 202,36
                 L202,86
                 L327,85
                 L421,166
                 L460,166
                 L499,132
                 L588,211
                 L617,211
                 L712,134
                 L748,165
                 L780,165
                 L830,111
                 L913,212
                 L938,212
                 L1028,140
                 L1078,184
                 L1107,184
                 L1152,140
                 L1263,249
                 L1263,248"
              />
           </svg>
        </div>

路径（PATH）的图示

    #container {
        width:1263px; height:255px;
        position:absolute;
    }

    #container svg {
        width:100%; height:100%;
        fill:none;
        stroke:#008066; stroke-width:8;
        stroke-dasharray:1628; stroke-dashoffset:1628.1;
        stroke-linecap:square;

        animation:polyline 3.15s linear 0.5s forwards;
    }

    @keyframes polyline {
        to {
            stroke-dashoffset:0;
        }
    }

这是否可能？

通过使用CLIPPATH元素，然后以某种方式对其进行动画处理，这是否可能？

TIA

更新

下面是带有PATTERN和IMAGE元素以及相应CSS的代码，但似乎没有产生描边。

    <defs>
       <pattern id="pattern" width="1600" height="800" patternUnits="userSpaceOnUse">
          <image xlink:href="http://lorempixel.com/1600/800/nature" width="1600" height="800" />
       </pattern>
    </defs>

    #container svg {
        stroke:url(#pattern);
    }

- user2230470

---

请添加代码，展示您目前的进展。 - Robert Longson

@RobertLongson 已完成。 - user2230470

@RobertLongson，我删除了PATTERN元素及其代码，因为它没有起作用。正如我在问题中明确表达的那样，我不知道我想要实现的效果是否可能... - user2230470

如果您提供失败的代码并解释它所做的事情与您想要它做的事情之间的区别，那么我可能能够告诉您。 - Robert Longson

@RobertLongson 没事了。显然它与Waterfox和Edge不兼容，只能在Chrome上运行。我不确定为什么演示在Waterfox上可以工作，但我的页面却不能？？？演示不适用于Edge，我的页面也是如此，这更有道理。 - user2230470

Answer 1

这是你所依赖的Chrome/Safari bug。

stroke:url(#pattern);

实际上是缩写形式

stroke:url(<this file>#pattern);

但是CSS文件中没有模式。Chrome会出错，而Firefox则正确。如果您修复了参考，Firefox将正常工作，但不幸的是Chrome将不再工作。因此，最兼容的解决方案是将CSS（至少引用模式的部分）移动到SVG文件本身中，在<style>标签内。

- Robert Longson

---

它在我的Chrome上仍然可以工作。然而，更多的时候它似乎会干扰我用来定位元素的jQuery。 - user2230470

Answer 2

在Firefox上它运行良好。我不确定你遇到的问题是什么。

#container svg {
  fill: none;
  stroke-width: 10px;
  stroke: url(#pattern);
  stroke-dasharray:1628;
  stroke-dashoffset:1628.1;
  animation:polyline 3.15s linear 0.5s forwards;
}

@keyframes polyline {
  to {
    stroke-dashoffset:0;
  }
}

<div id="container">
  <svg>
    <defs>
      <pattern id="pattern" width="1600" height="800" patternUnits="userSpaceOnUse">
        <image xlink:href="http://lorempixel.com/1600/800/nature" width="1600" height="800" />
      </pattern>
    </defs>

    <path d="M0,5
             L184,5
             C202,5 202,5 202,36
             L202,86
             L327,85
             L421,166
             L460,166
             L499,132
             L588,211
             L617,211
             L712,134
             L748,165
             L780,165
             L830,111
             L913,212
             L938,212
             L1028,140
             L1078,184
             L1107,184
             L1152,140
             L1263,249
             L1263,248"
          />
  </svg>
</div>

- Paul LeBeau

---

它在Waterfox上无法工作。我下载了Firefox进行双重检查，实际上在那里也无法工作。但Robert Longson提供了以下解决方案。 - user2230470