Question

<svg width="200px" height="160px">
  <path d="M30 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

它只显示曲线...... .i也尝试过画布..但我不知道如何画画。

Answer 1

箭头是SVG中的标记，通常是某人创建的路径。我多年来一直在使用以下产品，但还有其他产品可用。

您将箭头pathis放在svg中的<defs>容器中，该容器可视地隐藏元素，但通过调用marker-start或marker-end = "url(#mypathId)"

使它们可用

下面是带有箭头路径的svg，可以在路径的开头和结尾用作标记。注意，标记的大小会根据路径的笔触宽度自动设置：

<svg width="200px" height="160px">
<defs id="arrowDefs">
<marker id="arrowEnd" fill="blue" stroke-linejoin="bevel" viewBox="0 0 8000 8000" refX="280" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto"><path id="arrowEndPath" stroke="rgb(0, 0, 0)" stroke-width="5" d="M 2 59 L 293 148 L 1 243 L 121 151 Z" /></marker>
<marker id="arrowStart" fill="red" stroke-linejoin="bevel" viewBox="0 0 8000 8000" refX="20" refY="140" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto"><path stroke="rgb(0, 0, 0)" stroke-width="5" transform="rotate(-8 -0.00363379 147.5)" d="M 4 147 L 299 60 L 159 148 L 299 251 Z" /></marker>
</defs>
  <path d="M30 80 Q 52.5 10, 95 80 T 180 80" stroke="black" stroke-width="2" marker-start="url(#arrowStart)"  marker-end="url(#arrowEnd)" fill="transparent"/>
</svg>

如何在svg或画布中绘制箭头曲线......我看到很多例子，但我不知道如何绘制

1 个答案: