如何在 svg 中沿笔划或路径绘制图案？

Question

我需要沿着 SVG 路径绘制图案。我尝试使用 SVG 标记，但它们沿路径的方向存在问题。有没有其他方法可以实现这一点？如果是，我的方法应该是什么？预期的结果是这样的——

Answer 1

如果有人搜索它并且不想使用其他答案中提到的 textPath，以下是如何使用虚线创建这个特定的链模式。许多其他模式可以用类似的方式创建，特别是如果您合并过滤器（编辑：我在这里创建了更多示例）。

在这里，我沿着同一路径使用三条虚线 - 其中两条交替创建链段，第三条使用遮罩创建孔。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">

<defs>
  <path id="chain-path" d="M 50,50 C 50,150 250,150 250,50" fill="none" stroke-linecap="round"/>

  <mask id="holes">
    <!-- white everywhere = keep everything... -->
    <rect x="0%" y="0%" width="100%" height="100%" fill="white"/>

    <!-- ...except holes -->
    <use href="#chain-path" stroke-width="4" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="black"/>
  </mask>
</defs>

<!-- segments whose hole is visible, with holes cut out using mask-->
<use href="#chain-path" stroke-width="8" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="black" stroke-opacity=".8" mask="url(#holes)"/>

<!-- segments whose hole isn't visible -->
<use href="#chain-path" stroke-width="2" stroke-dasharray="12 8" stroke="black" stroke-opacity=".8"/>

</svg>

textPath 的一个小缺点是，如果路径太弯曲，各个段会沿着可见的线弯曲。

Answer 2

当我阅读问题时，立即产生了使用 unicode 绘制链节的想法。

我搜索了很长时间的合适的 unicode 字符。无法使用链的 unicode 字符。U+26D3 ⛓“链”的 unicode 字符 支持很差。

我决定使用 Unicode 字符的变体——“侧面的拉丁小写字母”U+1D11 ᴑ和一个连字符来连接相邻的链节——-

技术支持：Firefox、Chrome、Opera、IE11
我没有检查 Safari 浏览器。

<svg width="600" height="400" viewBox="80 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>


<text font-size="36" x="0" y="0" font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
  </textPath>
</text>				
			
</svg>   

除了链的静力学，还有一个动画的例子。

实现动画的命令：

<animate dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1"/>

<svg width="600" height="400" viewBox="100 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
<animate  dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1%"/> 
</textPath>
</text>				
			
</svg>