是否可以使用图像代替 SVG 路径的笔画？

首先，我知道这个问题是very如同this问题，但我尝试用一​​个来实现该解决方案SVG PATH但它不起作用。

我还知道另一种解决方案是循环PATH并设置FILL of the PATH如上所述here以及网络上的其他地方。

不过，我已经动画化了STROKE-DASHOFFSET of the PATH这样的行程PATH，它只是一条不规则的线，看起来就像是被绘制到页面上一样；这就是我想要在不使用颜色的情况下实现的效果STROKE而是一个图像。换句话说，对于用户来说，图像（而不是纯色）就像是作为不规则的线条绘制到页面上的。

根据要求，以下是 HTMLPATH我正在使用的及其相应的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

Update

下面是带有PATTERN and 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);
    }

这是您所依赖的 Chrome/Safari 错误。

stroke:url(#pattern);

实际上是简写

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

但 css 文件中没有模式。 Chrome 的做法是错误的，而 Firefox 的做法是正确的。如果您修复了参考，Firefox 将可以工作，但不幸的是 Chrome 将不再工作。因此，最兼容的解决方案是将 CSS（至少是引用该模式的部分）移动到 SVG 文件本身中<style> tags.