2

Я не знаю, что я делаю не так, мне не удается расположить эту анимацию вращения по центру SVG.

https://codepen.io/Alecurtu/pen/jOVobxK

 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  transform-origin: 50% 50%;
}

svg {
  animation: 5s Text infinite;
  transform-origin: 50% 50%;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  animation: spin 4s infinite linear;
}

Свободный перевод вопроса SVG not animating on center от участника @Alec Urtusuastegui.

1

3 ответа 3

3

То, что вы анимируете, требует transform-origintransform-box:fill-box), для #Text а не внешнего элемента svg.

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 4s infinite linear;
}

</div>
<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"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
  
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
    <path d="M7.2,237.5l33.3-8.9l1.7,6.2l-3,0.7c3,1,4.4,3,5.4,5.9c2,7.4-3,12.1-9.9,14.1c-6.9,2-13.6,0.2-15.5-7.2
        c-0.7-3-0.5-5.7,1.5-7.9l-11.8,3.2L7.2,237.5z M29.8,238.3c-4.9,1.2-6.7,3.7-5.4,7.6c1,3.9,3.7,5.2,8.6,3.7
        c4.9-1.2,6.7-3.7,5.4-7.6C37.2,238,34.8,236.8,29.8,238.3z"/>
    <path d="M30.8,200.8l6.2-0.5l1,9.6l-2.5,0.2c2,1,3.2,3,3.7,6.4c0.5,5.9-3.5,9.1-7.9,9.6c-4.4,0.5-9.1-2-9.6-7.9
        c-0.2-3.7,0.5-5.7,2.2-7.2l-5.4,0.5l1.2,12.8l-5.7,0.5l-2-19.2l19.2-2L30.8,200.8z M29.6,210.6c-2,0.2-3.5,1.7-3,4.9
        c0.2,3.5,2,4.4,3.9,4.2c2-0.2,3.5-1.7,3-4.9C33.3,211.4,31.6,210.4,29.6,210.6z"/>
    <path d="M18.3,187.7l13.6,0.5l0.2-6.7l5.9,0.2l-0.5,13.1L18,194.1l-0.2,3.9l-5.9-0.2l0.2-3.9L3,193.6l0.2-6.4l9.1,0.2l0.2-6.7
        l5.9,0.2L18.3,187.7z"/>
    <path d="M34,164.3l0.2-0.7L8.9,150.5l1.2-6.7l31.1,16.3l-1.7,9.6l-34.8,3.9l1.2-6.7L34,164.3z"/>
    <path d="M46.1,125.1l5.7,2.2l-3.2,8.9l-2.2-0.7c1.2,1.7,1.7,3.9,0.5,7.4c-2,5.7-7.2,6.9-11.3,5.2c-4.2-1.5-7.4-5.7-5.4-11.3
        c1.2-3.5,3-4.9,5.2-5.4l-5.2-2l-4.4,12.1l-5.4-2l6.7-18l18,6.7L46.1,125.1z M40.7,133.2c-2-0.7-3.7,0-4.9,3.2
        c-1.2,3.2,0,4.9,1.7,5.7c2,0.7,3.7,0,4.9-3.2C43.7,135.7,42.7,133.9,40.7,133.2z"/>
    <path d="M59.2,114.7c-3.7,6.7-8.6,8.9-15.8,4.9l-12.6-7.2l3.2-5.7l12.3,6.9c3.9,2.2,5.9,1.5,7.9-2c2-3.5,1.5-5.7-2.5-7.9L39.5,97
        l3.2-5.7l12.6,7.2C62.4,102.6,62.9,108.3,59.2,114.7z"/>
    <path d="M43.2,75.3L71,95.5l-3.7,5.2L39.5,80.4L43.2,75.3z"/>
    <path d="M65.4,71.8l10.1,8.9l4.4-5.2l4.4,3.9l-8.6,9.9L61.2,76.5l-2.7,3L54,75.5l2.7-3l-6.9-5.9l4.2-4.9l6.9,5.9l4.4-5.2l4.4,3.9
        L65.4,71.8z"/>
    <path d="M88.5,67.9l3.9,4.2l-4.7,4.4l-3.9-4.4L88.5,67.9z"/>
    <path d="M101.8,48.4l14.3,5.2l-6.4,4.7l-8.9-3.9l-0.2,0.2l1,9.6l-6.2,4.4l-0.7-15.3l-14.3-5.2l6.2-4.4l9.1,3.7l0.2-0.2l-1-9.6
        l6.4-4.7L101.8,48.4z"/>
    <path d="M128.5,19l14.8,29.8l-18.5,9.4l-2.5-5.7l12.8-6.4l-3-5.9c-0.5,2.2-2.2,4.2-4.9,5.4c-6.9,3.5-11.6,0.7-14.8-5.4L107,29.4
        l5.7-3l5.2,10.6c1.7,3.5,4.2,4.2,7.6,2.5c3.5-1.7,4.2-3.9,2.5-7.6l-5.2-10.6L128.5,19z"/>
    <path d="M159.5,13.6l-8.1,18l12.6-3.9l1.7,5.7L144.3,40l-1.5-4.4l8.1-18l-12.6,3.9l-1.7-5.7l21.5-6.7L159.5,13.6z"/>
    <path d="M175.8,25.7l1,5.9l-6.2,1l-1-5.9L175.8,25.7z"/>
    <path d="M187.9,24l0.7,5.9l-6.4,0.7l-0.7-5.9L187.9,24z"/>
    <path d="M200,23.2l0.2,5.9l-6.4,0.2l-0.2-5.9L200,23.2z"/>
    <path d="M218.2,3.8c7.4,0.5,10.6,5.7,10.4,11.6l-6.4-0.5c0-2.7-0.7-4.9-4.2-5.2c-4.4-0.2-5.4,2-5.9,6.9c-0.2,4.9,0.5,7.4,4.9,7.6
        c3.7,0.2,4.4-1.7,4.9-4.7l6.4,0.5c-0.5,5.9-4.7,10.6-11.8,10.1c-7.9-0.5-11.3-6.4-10.6-14.1C206.2,8.4,210.3,3.3,218.2,3.8z"/>
    <path d="M232.8,18.3c1.7-7.6,7.2-11.8,15-10.1c7.9,1.7,10.8,8.1,8.9,15.5c-1.7,7.6-7.2,11.8-15,10.1
        C234,32.1,231.1,25.7,232.8,18.3z M250.3,22.5c1.2-5.2,0.2-7.4-4.2-8.4c-4.2-1-6.2,0.5-7.4,5.7s-0.2,7.4,3.9,8.4
        C247.3,29.2,249.1,27.7,250.3,22.5z"/>
    <path d="M289.2,51.3l-5.9-2.7l8.1-17.8l-7.4-3.5l-8.1,17.8l-5.9-2.7l8.1-17.8l-7.4-3.5L262.6,39l-5.9-2.7l10.6-23.2l32.3,14.5
        L289.2,51.3z"/>
    <path d="M311.9,36.6l-13.8,21.2l-5.4-3.5l13.8-21.2L311.9,36.6z M316.9,28.9l-2.7,4.2l-5.4-3.5l2.7-4.2L316.9,28.9z"/>
    <path d="M320.1,75.3l-4.9-4.2l12.6-15l-7.9-6.7l-12.6,15.3l-4.9-4.2L318.6,41l17.8,14.8L320.1,75.3z"/>
    <path d="M357.8,79.7l-25.2,21.7l-13.1-15.3l4.4-3.9l9.1,10.4l5.2-4.4c-2.2,0-4.7-0.7-6.9-3.5c-4.9-5.7-3-11.8,2-16
        c4.9-4.2,11.3-5.2,16.3,0.5c2.2,2.7,2.7,5.2,2.2,7.6l2-1.7L357.8,79.7z M345,82.2c3-2.5,3.5-5.2,0.7-8.4c-2.7-3.2-5.4-3-8.4-0.5
        c-3,2.5-3.7,5.2-0.7,8.4C339.3,85.1,341.8,84.9,345,82.2z"/>
    <path d="M360,110.3c-1,5.4,0,11.6,1.7,15.5s3.5,6.2,6.4,4.7c2.7-1.2,2.2-3.9,1-10.4c-1.7-8.9-1-13.1,3.9-15.3
        c6.4-2.7,10.8,0.5,14.1,7.6c1.7,3.7,2.7,8.9,2.5,12.6l-5.4,2.5c-0.5-5.2-1.5-10.4-2.7-13.1c-1.2-3-3-4.9-5.4-3.7
        c-2.2,1-2,3.7-1,8.6c2,9.6,2.2,14.1-3.9,16.8c-6.7,3-11.6-0.7-14.8-7.9c-2-4.4-3.2-11.3-2.2-15.5L360,110.3z"/>
    <path d="M375.3,139.6c7.4-2,13.8,1,15.8,8.6s-2.2,13.3-9.6,15c-7.4,2-13.8-1-15.8-8.6C363.5,147,367.7,141.6,375.3,139.6z
         M379.7,157.1c5.2-1.2,6.7-3.2,5.7-7.4c-1-4.2-3.2-5.2-8.4-3.9c-5.2,1.2-6.7,3.2-5.7,7.4C372.3,157.6,374.3,158.6,379.7,157.1z"/>
    <path d="M382,167.7c7.6-0.7,13.6,3.2,14.3,11.1c0.7,7.9-4.2,12.8-12.1,13.3c-7.6,0.7-13.6-3.2-14.3-11.1
        C369.1,173.2,374.3,168.5,382,167.7z M383.7,185.7c5.4-0.5,7.2-2.2,6.7-6.4c-0.5-4.4-2.5-5.7-7.6-5.2c-5.4,0.5-7.2,2.2-6.7,6.4
        C376.3,185,378.3,186.2,383.7,185.7z"/>
    <path d="M369.9,219.5l0.5-6.4l19.5,1.5l0.7-10.4l-19.5-1.5l0.5-6.4l25.4,1.7l-1.7,23.2L369.9,219.5z"/>
    <path d="M373.3,232.1l-5.9-1.2l1.2-6.4l5.9,1.2L373.3,232.1z"/>
    <path d="M370.4,243.9l-5.7-1.5l1.7-6.2l5.7,1.5L370.4,243.9z"/>
    <path d="M366.4,255.5l-5.7-2l2.2-6.2l5.7,2L366.4,255.5z"/>
    <path d="M381.2,271.3l-2.5,5.9l-30.6-13.3l4.7-10.8l5.4,2.5l-2.2,4.9L381.2,271.3z M386.9,280.9l-4.4-2l2.5-5.9l4.4,2L386.9,280.9z
        "/>
    <path d="M364.9,277c6.7,3.9,9.1,10.4,5.2,17.3c-4.2,6.9-10.8,7.9-17.5,3.9c-6.7-3.9-9.1-10.4-5.2-17.3
        C351.4,274,358.3,273,364.9,277z M355.6,292.7c4.7,2.7,6.9,2.5,9.1-1.2c2.2-3.7,1.5-5.9-3.2-8.6c-4.7-2.7-7.2-2.5-9.4,1.2
        C350.2,287.6,351.1,289.8,355.6,292.7z"/>
    <path d="M355.1,315.2l-20.2-15.3l3.9-5.2L359,310L355.1,315.2z M362.5,320.6l-3.9-3l3.9-5.2l3.9,3L362.5,320.6z"/>
    <path d="M315.9,320.4l4.4-4.7l14.1,13.6l7.2-7.4l-14.1-13.6l4.4-4.7l18.2,17.8l-16.3,16.5L315.9,320.4z"/>
    <path d="M273,376.8l-6.2-25.4l9.6-4.9l12.3,14.8l0.7-0.2l-4.9-18.5l9.6-4.9l17,19.7l-5.9,3l-12.6-14.8l-0.7,0.2l4.9,18.7l-9.9,4.9
        l-12.3-14.8l-0.7,0.2l4.7,18.7L273,376.8z"/>
    <path d="M237.7,366.2l-1.5-5.9l9.4-2.5l0.7,2.5c0.7-2,2.2-3.7,5.9-4.7c5.9-1.5,9.6,2,10.8,6.2c1.2,4.4-0.5,9.4-6.2,10.8
        c-3.5,1-5.7,0.2-7.4-1l1.5,5.2l12.3-3.5l1.5,5.4l-18.5,4.9l-4.9-18.5L237.7,366.2z M247.6,365.7c0.5,2,2.2,3.2,5.4,2.2
        c3.2-1,4.2-2.7,3.5-4.7c-0.5-2-2.2-3.2-5.4-2.2C247.8,362,246.8,363.8,247.6,365.7z"/>
    <path d="M229.3,386.4l-3.7-25.2l6.4-1l3.7,25.2L229.3,386.4z M230.8,395.6l-0.7-4.9l6.4-1l0.7,4.9L230.8,395.6z"/>
    <path d="M213.3,382l-0.7-13.6l-6.7,0.5l-0.2-5.9l13.1-0.7l1.2,19.5l3.9-0.2l0.2,5.9l-3.9,0.2l0.5,9.1l-6.4,0.2l-0.5-9.1l-6.7,0.5
        l-0.2-5.9L213.3,382z"/>
    <path d="M191.8,397l0.2-4.9l6.4,0.2l-0.2,4.9L191.8,397z M192.3,387.9l1.2-25.4l6.4,0.2l-1.2,25.4L192.3,387.9z"/>
    <path d="M165.7,358.6l6.4,1l-3.2,19.2l10.1,1.7l3.2-19.2l6.4,1l-4.2,25.2l-22.9-3.9L165.7,358.6z"/>
    <path d="M130.9,373.9l10.8-31.6L161,349l-2,5.7l-13.1-4.4l-2.2,6.4c2-1,4.4-1.7,7.9-0.5c6.9,2.5,8.6,8.9,6.4,14.8
        c-2,5.9-7.2,10.1-14.3,7.6c-3.5-1.2-4.9-3.2-5.7-5.4l-1,2.5L130.9,373.9z M140.6,365.2c-1.2,3.7-0.5,6.2,3.7,7.6s6.2-0.2,7.4-3.7
        c1.2-3.7,0.5-6.2-3.7-7.6C144,360.1,142,361.3,140.6,365.2z"/>
    <path d="M95.4,365.2l18.2-29.3l5.4,3.5l-18.2,29.3L95.4,365.2z"/>
    <path d="M83.6,357.1l3-3.9l5.2,3.7l-3,3.9L83.6,357.1z M89,349.7l14.8-20.5l5.2,3.7l-14.8,20.5L89,349.7z"/>
    <path d="M93.7,333.2c-1.5-5.2-3.2-7.9-5.9-10.4c-1.7-1.5-3.2-1.5-3.9-0.7c-1,1-0.7,2.2,1.7,5.2c4.9,6.2,4.4,9.9,2,12.8
        c-3.5,3.7-8.1,2.7-12.1-1c-2.5-2.2-4.9-5.7-5.4-8.4l3.9-4.4c1.5,3.7,3.9,6.9,5.9,8.9c1.2,1.2,2.5,1.2,3.2,0.5c0.7-1,0.7-2-1.5-5.2
        c-4.4-6.2-5.4-9.1-2.2-12.8c3.5-3.7,8.6-3,12.8,1c3,2.5,4.9,5.4,5.9,9.6L93.7,333.2z"/>
    <path d="M61.9,315.9l10.4-8.9l-4.4-5.2l4.4-3.9l8.6,10.1l-14.8,12.6l2.5,3l-4.4,3.9l-2.5-3l-6.9,5.9l-4.2-4.9l6.9-5.9l-4.4-5.2
        l4.4-3.9L61.9,315.9z"/>
    <path d="M41.7,313.2L38,308L58.2,294l3.7,5.2L41.7,313.2z M61.7,291.5l3.9-2.7l3.7,5.2l-3.9,2.7L61.7,291.5z"/>
    <path d="M33.8,301.4l-3.2-5.4l21.2-12.6l3.2,5.4L33.8,301.4z M55.2,281.2l4.2-2.5l3.2,5.4l-4.2,2.5L55.2,281.2z"/>
</g>
</svg>
</div>

Свободный перевод ответа от участника @Robert Longson.

3

Рассмотрите возможность использования: textPath

В этом случае вам не нужно будет создавать путь для каждой буквы, как было сделано в коде вопроса.

Код будет значительно сокращен и если в будущем потребуется изменить текст, то вам нужно будет перерисовывать каждую букву в векторном редакторе. Достаточно будет изменить только текст внутри тегов <text> ... </text>

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:48px;
  font-weight:bold;
  fill:black;
  letter-spacing:2;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}
<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
     
      <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 

   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
     
       
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> datVault.hyz...coming Soon...join waiting list!!
        </textPath> 

      </text>
</g>
</svg>
</div>

Вы также можете стилизовать часть текста, заключив ее в теги :

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:46px;
  font-weight:bold;
  fill:black;
  letter-spacing:4;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}
<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
         <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 
   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> <tspan style="fill:red">datVault</tspan>.hyz...coming Soon...<tspan style="fill:red"> join</tspan> waiting list!!
        </textPath> 

      </text>
 </g>
</svg>
</div>

Свободный перевод ответа от участника @Alexandr_TT.

2

Ответ в качестве бонуса

Рассмотрите возможность размещения половин текста симметрично по отношению к изображению.

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

Пояснения, как этого добиться:

  • Для получения данного эффекта, текст делится на две части, и каждая половина текста помещается на отдельной дуге в команде textPath. Начало текста и начало дуги должны начинаться с одного и того же места.

Поэтому учтем это условие при создании дуг. Чтобы указать направление размещения текста, прикрепляется (для визуализации понимания) marker-end (стрелка) к концу дуги для текста.

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
 <defs>
          <marker id="end"  refX="10" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10"  />
    </marker>
  
 </defs>
 <path marker-end="url(#end)" id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="2" />
 </svg>

  • Создадим вторую дугу.

Формулы обеих дуг отличаются только одним параметром - значением sweep-flag.

  1. sweep-flag ="1", дуга рисуется по часовой стрелке

  2. sweep-flag ="0" `дуга рисуется против часовой стрелки

Подробнее здесь

  • Размещаем половинки текста на эти дуги

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
 
 <path id="top"  d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text  dy="-12px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="5%"> datVault.hyz...coming Soon
    </textPath>  
   </text> 
 <text <text  dy="26px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="6"  >
 <textPath   xlink:href="#bottom"   startOffset="12%"> join waiting list!!
    </textPath> 
   </text>  
 </svg>

  • Добавляем лого и стили

.container {
width:30vw;
height:auto;
}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400"  >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="5%"> datVault.hyz...coming Soon</textPath>  
 </text> 
     <text id="txtBottom"   dy="26px" dx="0" letter-spacing="7"  >
        <textPath   xlink:href="#bottom"   startOffset="12%"> join waiting list!!</textPath> 
     </text>    
 </svg>
 </div>

Примеры анимации текста

Анимация текста реализована с помощью изменения атрибута startOffset.

Анимация начинается после клика

  1. при значении startOffset = "100%", текст полностью скрыт

  2. при startOffset = "0%", текст полностью виден

.container {
width:30vw;
height:auto;
}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400" >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="100%"> datVault.hyz...coming Soon 
     <animate id="an"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;5%;5%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" />
    </textPath>  
   </text> 
 <text id="txtBottom"   dy="26px" dx="0" letter-spacing="7"  >
 <textPath   xlink:href="#bottom"   startOffset="100%"> join waiting list!! 
     <animate id="an2"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;12%;12%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" />
    </textPath> 
   </text>  
 </svg>
 </div>

  • Анимация зацикливания и сворачивания текста

.container {
width:35vw;
height:auto;

}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}  
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400"  >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="100%"> datVault.hyz...coming Soon 
     <animate id="an" attributeName="startOffset" begin="svg1.click;an.end+1s" dur="8s" values="100%;5%;5%;100%" fill="freeze" />
    </textPath>  
   </text> 
 <text id="txtBottom"   dy="27px" dx="0" letter-spacing="7"  >
 <textPath   xlink:href="#bottom"   startOffset="100%"> join waiting list!! 
     <animate id="an2" attributeName="startOffset" begin="svg1.click;an2.end+1s"  dur="8s" values="100%;12%;12%;100%" fill="freeze" />
    </textPath> 
   </text>  
 </svg>
 </div>

Вертикальная анимация букв из одной нижней точки

Код тот же, что и в примере выше, нужно только немного изменить код дуг, применяемых в textPath, которые должны должны начинаться из одной верхней точки 200,50 и заканчиваться в нижней точке 200,350

<path id="top"   d="M200 50 A150 150 0 0 0 200 350" fill="none" stroke="black" stroke-width="3" />
  <path id="bottom"  d="M200 50 A150 150 0 0 1 200 350" fill="none" stroke="black" stroke-width="3" />  

.container {
width:30vw;
height:auto;
}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400" >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 
 <path id="top"   d="M200 50 A150 150 0 0 0 200 350" fill="none" stroke="black" stroke-width="3" />
  <path id="bottom"  d="M200 50 A150 150 0 0 1 200 350" fill="none" stroke="black" stroke-width="3" />  
 <text id="txtTop"  dy="25px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="5%"> datVault.hyz...coming Soon 
     <animate id="an"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;5%;5%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" />
    </textPath>   
   </text> 
 <text id="txtBottom"   dy="-10px" dx="0" letter-spacing="7"  >
 <textPath   xlink:href="#bottom"   startOffset="12%"> join waiting list!! 
     <animate id="an2"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;12%;12%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" /> 
    </textPath> 
   </text>  
 </svg>
 </div>

Свободный перевод ответа от участника @Alexandr_TT.

Ваш ответ

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

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