Is it possible to use an image in place of the stroke of an SVG path?

Question

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

@RobertLongson I deleted the `PATTERN` element and its code because it did not work, and as it is made abundantly clear by my questions I do not know if the effect I want to achieve is even possible... — , Dec 29 '15 at 22:44
@RobertLongson "Am I doing something wrong?" That's not the question, my friend! The question is whether or not this is even possible... — , Dec 29 '15 at 22:46
If you provide the failing code and explain what the difference is between what it does and what you want it to do then I might be able to tell you. — Robert Longson, Dec 29 '15 at 22:47
@RobertLongson You have all the information you need. I want to do almost exactly what I'm already doing, except instead of the effect producing a solid color as the `STROKE` I want to the effect to utilize an actual image. Is that possible? — , Dec 29 '15 at 22:49
Maybe, it depends what you want the image to look like as it animates. In any case my existing answer to the linked question shows you how to do that. — Robert Longson, Dec 29 '15 at 23:01
@RobertLongson I simply want to be able to use any image, and instead of the animation producing or revealing a solid color, I want the animation to produce or reveal a part of an image. Perhaps my question and post are poorly worded. I'll check out your answer to the linked question (though I can't seem to spot the question you linked anywhere on this page). — , Dec 29 '15 at 23:05
the advice given was use a pattern in wich you set an image. give an id to the pattern and then link it to stroke. ex: http://codepen.io/anon/pen/GoNyKR — G-Cyrillus, Dec 29 '15 at 23:16
@RobertLongson @GCyrillus That's the problem I'm running into: The stroke is either nonexistent or invisible for one reason or another when I link the `PATTERN` element to the stroke. I'll edit the code above so that it reflects the code with the `PATTERN`, the `IMAGE`, and the like. — , Dec 29 '15 at 23:55
@GCyrillus I've basically copy and pasted the code in that demo, and it just doesn't produce a stroke anywhere other than that demo... I'm so confused — , Dec 30 '15 at 00:05
@RobertLongson Nevermind. Apparently it's incompatible with the Waterfox and Edge, yet works only on Chrome. I'm not sure why the demo would work on Waterfox, yet my page won't??? The demo doesn't work on Edge, and neither will my page, which makes more sense. — , Dec 30 '15 at 00:25
In the future instead of posting bits and pieces of the non-working example, I would suggest posting a complete example from the get go. — Paul LeBeau, Dec 30 '15 at 07:50
@user2230470 you linked to the other question I answered in your post. Your problem is you've coded to a chrome bug (see my answer). — Robert Longson, Dec 30 '15 at 10:08

score 1 · Accepted Answer · answered Dec 30 '15 at 10:06

1

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.

answered Dec 30 '15 at 10:06

Robert Longson

118,664
26
252
242

It actually still works on Chrome for me. However, more often than not it seemingly interferes with the jQuery I've used to position the elements. – Dec 31 '15 at 01:49

Paul LeBeau · Answer 2 · 2015-12-30T09:22:18.150

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

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

It wasn't working on Waterfox. I downloaded Firefox to double check and it actually wasn't working on there either. But Robert Longson provided the solution below. — , Dec 31 '15 at 01:47

Is it possible to use an image in place of the stroke of an SVG path?

2 Answers2

Linked

Related