maralov
@maralov
фронт-джун

Как растянуть круг path по периметру квадрата?

Как растянуть круг c текстом на всю ширину блока?

<svg style="border: 1px solid #000" width="130" height="130" viewBox="0 0 130 130" >
  <defs>
    <path 
          d="M65,65m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0"
          fill="transparent" 
          id="circleText"/>
  </defs>
  
  <circle cx="50%" cy="50%" r="6" fill="#4C6492"/>
  
  <text style="font-size: 14px;" dx="10">
    <textPath xlink:href="#circleText">
      memories that last fomaking
    </textPath>
  </text>
</svg>


получается пока только так:
609b88069a445313811738.jpeg

Макет:
609b8719dafa2413169550.jpeg
codepen
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
f3d0t
@f3d0t
<svg style="border: 1px solid #000" width="130" height="130" viewBox="0 0 130 130" >
  <defs>
    <path 
          d="M65,65m-50,0a23,23 0 1,1 103,0a23,23 0 1,1 -103,0" fill="transparent" id="tophalf"/>
  </defs>
  
  <circle cx="50%" cy="50%" r="6" fill="#4C6492"/>
  
  <text style="font-size: 14px;" dx="0" letter-spacing="5.7">
    <textPath xlink:href="#tophalf">
      memories that last fomaking
    </textPath>
  </text>
</svg>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы