主页 / 问题 / 760071
Accepted
Alexandr_TT
Asked:2020-12-18 23:11:22 +0000 UTC2020-12-18 23:11:22 +0000 UTC

如何沿线创建图案或路径链

  • 772

我需要 pattern沿着一条线创建链。
我尝试以markers链节的形式创建，但我在标记沿path.

有没有其他方法可以做到这一点？
如果是，我的方法应该是什么？

预期的结果是这样的： 在此处输入图像描述

资源

css

1 个回答

  1. Best Answer

    任何图像都可以使用以下命令沿着弯曲路径引导： 

    <animateMotion  dur="4s" repeatCount="2">
                        <mpath xlink:href="#pathChain"/>
                </animateMotion>

    代码示例：

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

<defs>
 <circle id="CirclePath" r="5" fill="red" />
</defs>
  <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>
 
<use  xlink:href="#CirclePath">
                <animateMotion
                  dur="4s"
                  repeatCount="indefinite">
                        <mpath xlink:href="#pathChain"/>
                </animateMotion>
                
        </use> 
</svg>

    但只有一个物体会沿着路径移动，即链条中的一个环节。要放置几十个链节，您将需要重复此命令数十次，并且无法优化代码。另外，定位和粘合相邻链接不可避免地会遇到困难。

    要沿弯曲路径放置文本，SVG 中有另一个命令 -<textPath> 

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

    上面的例子使用了来自 Enso @Michael Mullany 的回答的想法

    但是链条看起来不像我想要的那样。

    用更真实地模仿链式链接的 Unicode 字符替换字母怎么样？

    我决定使用 Unicode 字符 - “侧面的拉丁小写字母” -U+1D11 &#7441;以及连接相邻链节的连字符 -&#45; 

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

    <tspan dx="-15"> &#7441;</tspan>    , где

    &#7441;- Unicode 字符，O侧面是拉丁文。

    dx="-15" - 此字符向左偏移。

    另外，一个动画例子 

    <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="indefinite" attributeName="startOffset" values="1%;55%;1%"/> 
</textPath>
</text>				
			
</svg>

    2018 年 12 月 16 日更新

    在中心减速时在轨迹的开始和结束处暂停的运动示例。

    该算法是通过重复动画属性开头和结尾的数字来实现的。values="1%;37%;55%;55%;1%;1%"

    整个动画的持续时间 <animate dur="12s"除以中的位置个数 values
    因此，动画的一部分将是2s，如果位置连续重复55%;55%，则在此点会有暂停。 

    <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="12s" repeatCount="indefinite" attributeName="startOffset" values="1%;37%;55%;55%;1%;1%"/> 
</textPath>
</text>				
			
</svg>

    答案来源：如何在 svg 中沿笔划或路径绘制图案？@Alexandr_TT

    相关主题 -在动画中使用 Unicode 字符

    • 11

相关问题