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

Question

首先，我知道这个问题非常类似于this问题，但我尝试使用 SVG PATH 实现该解决方案，但没有成功。

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

但是，我对 PATH 的 STROKE-DASHOFFSET 进行了动画处理，这样 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>

Image of 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);
    }

Answer 1

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

stroke:url(#pattern);

实际上是

的简写

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

但是css 文件中没有模式。 Chrome 弄错了，Firefox 弄对了。如果您修复引用 Firefox 将工作但不幸的是 Chrome 将不再工作。因此，最兼容的解决方案是将您的 CSS(至少是引用模式的部分)移动到 <style> 内的 SVG 文件本身。标签。