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

Question

[maralov]

Как растянуть круг 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>

получается пока только так:


Макет:

codepen

Answer 1

[Andrew]

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

Comments

[maralov]

Andrew от спасибо тебе!!! а не поделишься теорией, так сказать?))

[Andrew]

maralov, привет)

вот правильный код :

<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 href="#tophalf">
      memories that last fomaking
    </textPath>
  </text>
</svg>

тут текст обернут в c href указывающим по айди на path выше. Он рендерит текст по . Я просто его(path) отредактировал в онлайн редакторе) textPath mdn

[maralov]

Andrew, спасибо. Поделись плиз этим редактором )

[Andrew]

maralov, да я загуглил, Online svg editor и выбрал один из первых)