Question

我想创建类似这样的线型来指示方向：

> > > > > > > > > > > > > > > > > > > >
▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎ ▶︎
→ → → → → → → → → → → → → → → → → → → →

并且如果线改变方向，则沿线跟随图案。在SVG中仅使用样式是否可能？请参见下面的代码段，但请想象一下三角形或角度而不是破折号。

<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" stroke-width="1ex" stroke-dasharray="8 12" fill="transparent">
        <animate attributeName="stroke-dashoffset" from="20" to="0" begin="0s" dur="1s" repeatCount="indefinite"/>
    </path>
</svg>

虽然动画确实传达了方向，但最好是显示带有或不带有动画的形状的方向。例如，用于静态屏幕截图或演示文稿，或用于不支持动画的旧版浏览器。在某些缩放比例下，用户可能只会看到一行的中间。端点可能不可见，因此他需要一些有关方向的提示。

Answer 1

我在路径上使用文字。文本是一个长字符串>。我正在为startOffset

设置动画

<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
  <path id="path" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"></path>

  <text stroke="#000000" font-size="14" dominant-baseline="middle">
      <textPath xlink:href="#path" startOffset="-100%">
       <animate attributeName="startOffset" from="-100%" to="0" begin="0s" dur="10s" repeatCount="indefinite"/> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      </textPath>
  </text>  
  
</svg>

Answer 2

是的，您可以使用SVG来实现，使用<defs>标签定义一个三角形，然后沿轴重复一系列三角形。之后，您可以仅使用CSS设置样式并对其进行转换。

.myPoly {
  fill:red;

}

.line {
  transform: rotate(110deg);
  transform-origin:5px 70px;
}

<svg height="210" width="500">
  <defs>
    <polygon id="myPoly" class="myPoly" points="5,2 9,12 1,12" 
   
  />
  </defs>
  <g class="line">
    <use x="0" y= "0" xlink:href = "#myPoly"/>
    <use x="0" y="10" xlink:href = "#myPoly"/>
    <use x="0" y="20" xlink:href = "#myPoly"/>
    <use x="0" y="30" xlink:href = "#myPoly"/>
    <use x="0" y="40" xlink:href = "#myPoly"/>
    <use x="0" y="50" xlink:href = "#myPoly"/>
    <use x="0" y="60" xlink:href = "#myPoly"/>
  </g>
</svg>

箭头线图案

2 个答案: