Question

首先，我知道这个问题非常类似于this问题，但我尝试使用SVG PATH来实现该解决方案工作

我也知道另一个解决方案是循环PATH并设置FILL的{{1}}，如上所述here和网络上的其他地方。

但是，我已为PATH的{{1}}设置了动画，以便STROKE-DASHOFFSET的笔划（它只是一条不规则的线条）看起来好像被绘制到页面上;这是我想要实现的效果，而不使用颜色作为PATH而是使用图像。换句话说，用户看起来好像图像（而不是纯色）被绘制为不规则的线条。

根据要求，下面是我正在使用的PATH的HTML及其相应的CSS，STROKE的图像，以及动画本身的CSS：

PATH

Image of PATH

PATH

这可能吗？

使用<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>元素然后以某种方式为其设置动画可以实现这一点吗？

TIA

更新

下面是带有#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元素的代码，以及相应的CSS，它似乎不会产生笔划。

PATTERN

Answer 1

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

stroke:url(#pattern);

实际上是

的简写

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

但是css文件中没有模式。 Chrome错了，Firefox搞定了。如果您修复了引用，Firefox将会正常运行，但不幸的是Chrome将不再适用。因此，最兼容的解决方案是将CSS（至少引用模式的位）移动到<style>标记内的SVG文件中。

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>

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

2 个答案: