1

введите сюда описание изображения

Как сделать закругленную стрелку, как на изображении ниже.

Ниже код, что у меня получилось на настоящий момент.
Но это ломанная линия, с помощью каких команд 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>

1
  • Не совсем корректный вопрос... Где нужно сделать стрелку и с помощью чего?
    – user351100
    9 апр 2020 в 11:47

2 ответа 2

5

Без векторного редактора

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

3

вот, в 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.