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

问题描述

首先，我知道这个问题是非常类似和网络上的其他地方。

但是，我动画了 PATH 的 STROKE-DASHOFFSET $ c> 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> 
  

  #container {
 width：1263px; height：255px; 
 position：absolute; 
} 
 
 #container svg {
 width：100％;高度：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 forward; 
} 
 
 @keyframes polyline {
 to {
 stroke-dashoffset：0; 
} 
} 
  

可以吗？

使用 CLIPPATH 元素，然后以某种方式使其动画吗？ / p>

TIA

更新：

下面是包含 PATTERN 和 IMAGE 元素的代码，以及相应的CSS，以产生笔画。

 < defs> 
< pattern id =patternwidth =1600height =800patternUnits =userSpaceOnUse> 
< image xlink：href =http://lorempixel.com/1600/800/naturewidth =1600height =800/> 
< / pattern> 
< / defs> 
 
 #container svg {
 stroke：url（#pattern）; 
} 
  

解决方案

  stroke：url（#pattern）; 
 

实际上是

的简写

  stroke：url（< this file> #pattern）; 
  

但在css文件中没有模式。 Chrome得到这个错误，Firefox正确。如果你修复参考Firefox将工作，但不幸的是，Chrome不会再。因此，最兼容的解决方案是在< style> 标签中将CSS（至少是引用模式的位）移动到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.

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.

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.

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:

        <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?

TIA

Update

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

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

解决方案

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

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.

这篇关于是否可以使用图像代替SVG路径的笔划？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！