主页 / 问题 / 1107802
Accepted
Leks
Asked:2020-04-09 19:42:03 +0000 UTC2020-04-09 19:42:03 +0000 UTC

如何制作圆形箭头？

  • 772

在此处输入图像描述

如何制作如下图所示的圆形箭头。

下面是我到目前为止的代码。
但它是一条折线，平滑尖角的SVG命令是什么？

<svg width='400' height='400' style='border: 1px solid black' >
     <polyline marker-end='url(#MarkerCircle)' points="30,30 60,10 90,10 120,30" fill="transparent" stroke="black" stroke-width="2"/>
</svg>

svg

2 个回答

  1. Best Answer

    没有矢量编辑器

    <svg viewBox="-2 -2 210 100" xmlns="http://www.w3.org/2000/svg" width="200">
  <circle cx="100" y="100" cy="100" r="100" fill="none" stroke="#000" />
  <path  d="M190,87 207,86 200,99z"/>
</svg>

    第二个手动选项

    <svg viewBox="-2 -2 210 100" xmlns="http://www.w3.org/2000/svg" width="200" class="svg1">
  <path d="M0,100 C0,100 -10,10 100,10 C100,10 200,10 200,100" fill="none" stroke="#000"/>
  <path  d="M190,87 207,86 200,99z"/>
</svg>

    第三个手动选项

    <svg viewBox="-2 -2 210 100" xmlns="http://www.w3.org/2000/svg" width="200" class="svg1">
  <ellipse cx="100" cy="110" rx="103" ry="80" fill=" none" stroke="#000"/>
  <path  d="M190,87 207,86 200,99z"/>
</svg>

    • 5

  2. 在这里，在 Illustratore 中组装，纠正错误

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M356.654,311.965c0-52.467-42.533-95-95-95c-52.467,0-95,42.533-95,95"/>
	<g>
		<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M356.31,303.816c-4.133-48.652-44.934-86.851-94.655-86.851
			c-52.467,0-95,42.533-95,95"/>
		<g>
			<path d="M356.156,302.03l-3.708-2.008l-0.075,0.127l2.625,5.751c0.552,2.022,1.104,4.043,1.656,6.065
				c0.348-2.067,0.694-4.134,1.042-6.201l2.037-5.984l-0.067-0.12L356.156,302.03z"/>
		</g>
	</g>
</g>
</svg>

    • 3

相关问题