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

First off, I know this question is very similar to this question, but I tried implementing that solution with an SVG PATH and it did not work.

首先,我知道这个问题与这个问题非常相似,但我尝试用SVG PATH实现该解决方案,但它没有用。

I also know that another solution would be to loop the PATH and set the FILL of the PATH as mentioned here and elsewhere on the web.

我还知道另一个解决方案是循环PATH并设置PATH的FILL,如此处和Web上的其他地方所述。

However, I have animated the STROKE-DASHOFFSET of the PATH so that the stroke of the PATH, which is simply an irregular line, appears as if it is being drawn onto the page; This is the effect that I want to achieve without using a color as the STROKE but instead an image. In other words, it would appear to the user as if the image (and not a solid color) is being drawn onto the page as an irregular line.

但是,我已经为PATH的STROKE-DASHOFFSET设置了动画,以便PATH的笔划(简单地说是一条不规则的线条)看起来好像被绘制到页面上一样;这是我想要实现的效果,而不使用颜色作为STROKE而是使用图像。换句话说,用户看起来好像图像(而不是纯色)作为不规则线被绘制到页面上。

As per requested, below is the HTML of the PATH that I am using and its corresponding CSS, an image of that PATH, and also the CSS of the animation itself:

根据要求,下面是我正在使用的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;
        }
    }

Is this possible?

这可能吗?

Is this possible by using the CLIPPATH element and then somehow animating it?

这可以通过使用CLIPPATH元素然后以某种方式动画它吗?

TIA

Update

Below is the code with the PATTERN and IMAGE element, and the corresponding CSS, which doesn't seem to produce a stroke.

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

2 个解决方案

#1

That's a Chrome/Safari bug you're relying on.

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

stroke:url(#pattern);

is actually shorthand for

实际上是简写

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

but there's no pattern in the css file. Chrome gets this wrong, Firefox gets it right. If you fix the reference Firefox will work but unfortunately Chrome won't any longer. The most compatible solution would therefore be to move your CSS (at least the bit that references the pattern) into the SVG file itself within <style> tags.

但是css文件中没有模式。 Chrome错了,Firefox搞定了。如果您修复了引用,Firefox将会正常运行,但不幸的是Chrome将不再适用。因此,最兼容的解决方案是将CSS(至少是引用模式的位)移动到

#2

It works fine on firefox. I am not sure what the problem is that you are having.

它在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>

#1