如何在svg中沿笔触或路径绘制图案? [英] How can I draw a pattern along a stroke or a path in svg?

问题描述

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

I need to draw pattern along SVG path. I tried using SVG markers but there is a problem with their orientation along the path. Is there any alternative way to accomplish this? If yes, what should be my approach? The expected result is something like this-

推荐答案

如果有人会搜索它并且不想使用textPath，这是可以使用虚线创建这种特殊链模式的方法.可以用类似的方式创建许多其他模式，特别是如果您合并了过滤器(我创建了更多示例这里).

In case anyone would search it and wouldn't want to use textPath, here's how this paricular chain pattern can be created using dashed lines. Many other patterns can be created in a similar way, especially if you incorporate filters ( I created more examples here).

在这里，我沿着同一条路径使用三个虚线-其中两个虚线交替地创建链段，而第三条虚线则使用蒙版创建孔.

Here I use three dashed lines along the same path - two of them alternately create chain segments and the third one creates holes using mask.

<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的一个小缺点是，各个段会沿着直线弯曲，如果路径弯曲的话，这是可见的.

A slight disadvantege against textPath is that the individual segments bend along the line which is visible if the path is too curved.

这篇关于如何在svg中沿笔触或路径绘制图案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！