Question

我需要沿着SVG路径绘制模式。我尝试使用SVG标记，但沿路径方向存在问题。有没有其他方法来实现这一目标？如果是的话，我的方法应该是什么？预期的结果是这样的 -

Answer 1

你可以用textPath来完成这样的事情。 Firefox是唯一支持textLength和lengthAdjust属性的大型浏览器，它们需要使字形重叠，但其他浏览器的结果并不可怕。如果你能找到合适的webfont，那它实际上看起来不错。

＆＃13;

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

＆＃13;

Answer 2

当我阅读问题时，立即使用unicodes绘制链接的想法。

我长时间搜索了一个合适的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>

Answer 3

万一有人搜索它并且不想使用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 4

没有。 SVG无法沿路径的形状弯曲一个符号。那种高级功能留给了矢量编辑器。

如果使用marker-mid标记并且有一系列短路径段，则可以接近。但是你必须与线段长度保持一致。在紧凑的曲线周围可能看起来不太好。

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

4 个答案: