Bending custom image as SVG stroke

Question

I have a SVG shape, let's say it's a circle:

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-150 -150 300 300" style="background:black;">
    <defs>
        <pattern id="stroke-image" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
            <image
                x="0" y="0"
                width="1" height="1"
                xlink:href="stroke-pattern.png"
                />
        </pattern>
    </defs>
    <circle cx="0" cy="0" r="100" stroke="url('#stroke-image')" stroke-width="10" fill="darkgreen"/>
</svg>

It uses this stroking image pattern

Code comes from another post ( Is it possible to use a background image on the stroke of an SVG element? )

Result is

But I want the pattern to "bend" around the circle, somehow like these stick mens http://www.clipartbest.com/cliparts/nTB/X6x/nTBX6xXgc.png

How can I do so?

Answer 1

You can't do what you want with a pattern. And there is not any other simple way to do this in SVG.

You perhaps could fake it in a couple of ways:

(a) Define your pattern as a marker and construct a circle shape with a lot of path or polygon points. However it may be tricky to get the pattern to line up with itself correctly.

(b) Define the shape and position it around your shape using transforms that have been calculated manually or with some Javascript.