代码之家 › 专栏 › 技术社区 › abhishek khandait

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

line svg javascript

abhishek khandait · 技术社区 · 7 年前

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

4 回复 | 直到 7 年前

Alexandr_TT 7 年前

当我读到这个问题时,使用Unicode绘制链节的想法立刻出现了。

我花了很长时间寻找一个合适的unicode字符。无法使用链的unicode字符。的unicode字符 U+26D3 ⛓ “链”的支撑非常差。

我决定使用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>

Watous 4 年前

如果有人会搜索它,并且不想使用其他答案中提到的textPath,下面介绍如何使用虚线创建这种双节链模式。可以以类似的方式创建许多其他模式,特别是如果您合并了过滤器(编辑:我创建了更多示例 here ).

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

<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相比,有一个小小的缺点是,如果路径太弯曲,则各个线段会沿着可见的直线弯曲。

Michael Mullany 7 年前

您可以使用textPath来完成类似的操作。Firefox是唯一一款支持textLength和lengthAdjust属性的大型浏览器,您需要这些属性才能使glyph重叠,但在其他浏览器中效果并不可怕。如果你能找到合适的webfont,它实际上可能看起来不错。

<svg width="590" height="560" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
  <path id="MyPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  </defs>
  
    <text font-family="Verdana" font-size="10" textLength="400" lengthAdjust="spacing">
    <textPath xlink:href="#MyPath">
      O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-
    </textPath>
  </text>
</svg>

Paul LeBeau 7 年前

不可以。SVG无法沿路径的形状弯曲一个符号。这种高级功能留给向量编辑器使用。

如果你使用 marker-mid 标记并具有一系列短路径段。但必须与线段长度保持一致。而且,在曲线很紧的情况下,情况可能不太好。