将自定义图像弯曲为SVG笔划

Question

我有一个SVG形状，让我们说它是一个圆圈：

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

它使用这种抚摸图像模式

代码来自其他帖子（Is it possible to use a background image on the stroke of an SVG element?）

结果是

但我希望这个模式能够围绕圆圈“弯曲”，不知怎的就像这些棍子一样http://www.clipartbest.com/cliparts/nTB/X6x/nTBX6xXgc.png

我该怎么办？

Answer 1

你不能用模式做你想做的事。在SVG中没有任何其他简单的方法可以做到这一点。

你可能会以某种方式伪造它：

（a）将您的模式定义为标记，并构建具有许多路径或多边形点的圆形。然而，让模式正确排列可能会很棘手。

（b）使用手动计算或使用某些Javascript计算的变换来定义形状并将其定位在形状周围。